微信小程序那些你不知道的事儿

最近从零开始开发了一个微信小程序商城，一个月的时间下来也算颇有心得，于是想拿出来分享一下。本来想给文章标题起为“微信小程序奇技淫巧”，但是一查，奇技淫巧的意思是指过于奇巧，让人着迷，却又无益的技艺与制品。但咱们这可不是无意义瞎扯淡，不能这么叫，所以咱们就来聊聊小程序那些你知道或不知道的事儿，没准就能帮到困惑中的你。

1、button边框样式修改

小程序的button组件可能是使用率最高的组件之一了，如果我们想要修改边框样式时直接修改button的css是没有效果的，需要这样：

button::after{
     border:none;
     border-radius:0;
}

2、事件传参

小程序中我们通常使用bindtap来绑定事件，但是绑定的方法并不能直接传参，我们需要借助标签的data-*属性，例如：

1	<view data-id="1" bindtap="openTab"> Click me! </view>

给openTab传递了一个id=1的参数，在方法函数内我们要取到这个参数也很简单

openTab(event) {
    // 获取参数id
    console.log(event.currentTarget.dataset.id)
}

3、阻止冒泡

事件分为冒泡事件和非冒泡事件，当一个组件上的冒泡事件被触发后，该事件会向父节点传递，如不希望事件冒泡只需用catch替换掉bind即可，bindtap对应catchtap。

4、改变数组值

修改静态的数组元素

1
2
3

this.setData({
    'array[0].text':'changed data'
})

如果索引的值是动态改变的需要使用这种写法：

let item = 'array['+index+'].text'
this.setData({
    [item]:'changed data'
})

5、跳转到tabBar页面

当要跳转到tabBar页面时，使用wx.navigateTo控制是无效的，这个时候需要使用wx.switchTab方法，并且url不可以有参数。

6、用户拒绝授权后重新发起授权

由于小程序不再支持wx.openSetting方法，因此再度引导用户打开授权需要借助button组件的open-type 属性：

1	<button open-type="openSetting" bindopensetting="handlerSetting">去授权</button>

openSetting打开授权页，bindopensetting用来绑定打开授权设置页后的回调方法。

7、组件传值

组件接受外部传入数据，但是需在Component构造器中定义properties才能使用，这点有点类似于vue的props。

1	<component param-a="1" param-b="hello"></component>

Component({
    properties: {
        //注意这里需要使用驼峰写法
        paramA: Number,
        paramB: String,
    }
})

8、调用组件方法

需要借助id选择器选择组件实例节点，调用组件方法

1	<component id="nav" param-a="1" param-b="hello"></component>

1	this.selectComponent("#nav").getList()

9、获取页面路径及参数

// 获取页面路径
this.route
// 获取参数
this.options

10、禁止页面上下拉出空白

在ios手机上上下滑动页面会被拉出一块空白区域，如果不想要这种效果可以在json文件中配置"disableScroll":true，但如果设置了这个配置会导致下拉刷新方法onPullDownRefresh失效。

11、阻止遮罩层滑动穿透

遮罩层也是使用频率比较高的组件，但遮罩层很容易产生滑动穿透的问题，即当我们触摸滑动遮罩层的时候，遮罩层下面的页面也会跟着滑动，如何来解决这个问题，我们来分几种情况讨论：

（1）底层页面不需要下拉刷新，那只要像上一小节所讲设置"disableScroll":true就好了。

（2）底层页面需要使用下拉刷新，遮罩层上无滚动，那么添加一个catchtouchmove事件:

1	<view class="mask" catchtouchmove="true"></view>

这样就阻止了触摸滑动及事件冒泡，达到阻止滑动穿透的效果。

（3）底层页面需要使用下拉刷新，遮罩层上有可滚动的区域，那么可以在遮罩层显示的时候动态的给下面的页面添加一个class使其定位固定不可滑动，样式可以是这样：

.fix{
    top:0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    z-index: 0;
}

12、手风琴菜单

想实现一个手风琴下拉菜单动效？其实很简单，只需动态设置子菜单的高度结合transition过渡效果就可以实现了。

1	<view class="sub-nav" style="{{active?style:'height:0;transition:height 0.5s;'}}">

1	let style = 'height:'+subNav.length*50+'rpx;transition:height 0.5s;'

13、封装request请求

小程序提供的request请求API在项目中使用时如果不二次封装一下总觉得有些繁重，看过了网上几个不同的封装方式总觉得有些不满意，于是反复改动了几次得到了一个自己觉得用起来比较方便的版本，在这里分享出来。

// request.js
// GET请求
function GET(url,data) {
    return request('GET',url,data)
}
// POST请求
function POST(url,data) {
    return request('POST',url,data)
}

function request(method,url,data) {
    let token = wx.getStorageSync('tokenInfo') || ''
    return new Promise((resolve, reject) => {
        wx.request({
            url: url,
            data: data,
            method: method, // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
            // 设置请求的 header
            header: {
                Authorization: `${token.token_type} ${token.access_token}`
            },
            success: res=> {
                if(res.data){
                    resolve(res)
                } else {
                    reject(res)
                }
            },
            fail: ()=> {
                wx.showToast({
                    title: '网络错误，请检查后重试',
                    icon: 'none',
                    duration: 2000
                })
            }
        })
    })
}

module.exports = {
    GET: GET,
    POST: POST
}

//app.js
const request = require("/utils/request.js")
App({
    // 全局声明https请求方法
    http:request
})

//获取应用实例
const app = getApp()
Page({
    data: {
        code: ''
    },
    onLoad() {
        app.http.GET('https://...',{name:'',pwd:''}).then((res)=>{
            // 成功
        }).catch((res)=>{
            // 异常
        })
    }
})

14、日期转换

IOS系统中new Date()方法不支持对’2018-04-12 23:00:00’这样的日期进行转换，需要对字符串进行正则替换replace(/-/g, '/')。

15、“分享监听”能力调整

出于倡导用户主动分享小程序的考虑，微信官方不再支持onShareAppMessage分享事件函数的回调参数：success、fail、complete，因此开发者以后将无法通过这几个回调来获取用户的分享结果，如果需求有涉及请尽快调整，以免受到影响。

16、getWXACodeUnlimit获取小程序码报错

使用getWXACodeUnlimit接口获取小程序码时，要注意scene参数最多接收32个字符，超出会报错。

17、自定义顶部导航栏

可在app.json的window属性下通过"navigationStyle":"custom"自定义导航栏。

"window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#3996F2",
    "navigationBarTitleText": "物恋便利",
    "navigationBarTextStyle":"white",
    "navigationStyle":"custom"
}

实际上就是去除了默认的导航栏但是会保留右上角胶囊按钮，标题什么的也没有了，需要开发者自己编写顶部导航。