【小程序】开发需要注意的地方（二）

16. 用户昵称头像问题

如果只是展示用户头像昵称，可以使用组件

<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>

17. js方法封装

有些方法会在小程序的多个页面使用，为了减少代码的冗余、方便修改，我们应该尽量在一个单独的js文件中做好封装，然后在其使用页面的js文件直接引用即可。

18. 小程序封装request请求

网站经常对登录的用户要保存其cookie来保存其登录信息。

但小程序的每次wx.request()都会先经过微信服务端再到服务器端，所以每一次request都会创建一个新的session。且微信小程序是没有cookie机制，如果要保存登录信息，需要开发者在发送请求时，手动加上Set-Cookie。

为防止代码重复，所以要针对wx.request()进行封装。

19. 小程序按钮多次点击问题

现象：小程序的页面跳转速度相对于H5页面的跳转还是比较慢的，当用户多次点击之后，会重复打开相同的页面，所以要针对按钮的点击要进行限制。

解决方法很多种，列举几例作为参考：

限制按钮在一秒或者几秒之内点击一次有效
点击按钮之后，setData设置按钮disabled属性为true
设置遮罩层Loading
按钮点击后，其点击事件设置为空

20. css中设置本地image问题

现象：当你在css中设置某个容器的background的url为本地图片的路径的时候，显示没效果。

解决方法：把该本地图片上传到网络上，然后在url中引用该图片链接，或者使用base64，或者是在wxml中使用image标签。

21. 小程序this.setData is not a function

现象：如果出现this.setData is not a function 这个错误，这个就是微信小程序中的this的指向问题，比如在发送请求成功之后的this指向。

解决方法：

const that = this;然后使用that.setData
使用ES6的箭头函数

注意：

单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。
直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。

22.使用data-xx传值

小程序会使用data-xx自定义属性，读取的时候event.currentTarget.dataset就可以获取设置的属性值，常用于循环渲染

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="viewTap"> Click me</view>

  viewTap: function(event) {console.log(event.currentTarget.dataset.alphaBeta) // 转化为驼峰写法console.log(event.currentTarget.dataset.alphabeta) // 所有的大写转化成小写}

注意写法

23. 小程序拨打电话报错

解决方法：小程序调用拨打电话参数 phoneNumber必须是字符串格式

calling: function (event) {wx.makePhoneCall({phoneNumber: 12300 + ''})
}

24. 关键字

关键字绑定常用于组件的一些关键字，像复选框组件一样，checked关键字如果等于true，则代表选中复选框，false则代表不选中复选框，示例代码如下：

<checkbox checked="{{false}}"> </checkbox>

不要直接写checked = “false”，其计算结果是一个字符串，转成boolean类型后代表真值。

25. 网络请求

小程序通过wx.request方法进行https网络请求，网络请求是获取网络数据的基本方法。

wx.request({url: 'test.php', // 仅为示例，并非真实的接口地址data: {x: '',y: ''},header: {'content-type': 'application/json' // 默认值},success(res) {console.log(res.data)}
})

注意点：

wx.request方法只支持https请求。
访问URL域名已经在微信小程序后台配置为合法域名，并且不能有端口。
method的value必须为大写（如GET）。
request请求的默认超时时间和最大超时时间都是60s。
request的最大并发数是5。
网络请求的referer是不可以设置的，固定格式为https://servicewechat.com/{appid}/{version}/page-frame.html。关于referer的详细解释

26. getCurrentPages()函数

框架以栈的形式维护了当前的所有页面。当发生路由切换的时候，页面栈的表现如下：

路由方式	页面栈表现
初始化	新页面入栈
打开新页面	新页面入栈
页面重定向	当前页面出栈，新页面入栈
页面返回	页面不断出栈，直到目标返回页
Tab 切换	页面全部出栈，只留下新的 Tab 页面
重加载	页面全部出栈，只留下新的页面

getCurrentPages()函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。

注意：

不要尝试修改页面栈，会导致路由以及页面状态错误。
不要在 App.onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成。
getCurrentPages() 跳转现在小程序支持十层。超过十层之后小程序可能会造成崩溃。

27. getApp()

微信小程序在App()函数里定义的是全局函数和全局数据，因此在页面文件夹的js文件也可以直接使用。比如存在“pages/home/home”这样的页面路径，在App()函数中也定义了全局函数getUserInfo()。则在home.js文件中就可以直接使用App()函数提供的全局函数或数据，代码如下：

//home.js
//获取应用实例
const app = getApp()Page({onLoad: function () {const that = this// 调用应用实例的方法获取全局数据app.getUserInfo({success: res => {that.setData({userInfo: res.userInfo,hasUserInfo: true})}})}
})

注意点：

App()函数必须在app.js中注册，且不能注册多个。
不能在App()内的函数调用getApp()，使用this就可以拿到App实例。
通过getApp()获取实例之后，不要私自调用生命周期函数。

28. 小程序生命周期

小程序生命周期分为两类：应用生命周期和页面生命周期。

应用生命周期包括onLaunch、onShow、onHide、onError、onUnload。

页面生命周期包括onLoad、onShow、onReady、onHide、onUnload。

详细解释

29. 小程序跳转到网页传送cookie参数的安全问题

在微信小程序开发中时常会使用webview加载一些H5网页，使用过程中肯定需要参数传递形成连接。针对一些携带用户信息的参数进行加密也变得至关重要的。详细解释

30. 小程序判断用户是否是通过点击别人分享的小卡片进入页面

用户进入小程序的方法有很多种，可以通过好友分享、群聊分享、微信聊天主页面下拉或者发现栏小程序等等多种途径。但如果通过好友分享或者群聊分享打开的可能是某一个小程序页面，不能返回主页面，这时就需要在分享的页面中加入一个返回主页面的按钮，所以需要判断用户进入的渠道。

其解决方法有多种，详细解释