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

It Works

已于 2023-05-30 09:29:29 修改

阅读量392

点赞数 1

文章标签：小程序

于 2019-03-05 10:27:55 首次发布

本文链接：https://blog.csdn.net/qq_36012563/article/details/88170622

版权

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
        })
      }
    })
  }
})