微信小程序开发记录总结

微信小程序的简易教程请参考官方文档：

https://developers.weixin.qq.com/miniprogram/dev/index.html

这里只记录自己开发中遇到的一些问题及注意事项。

1、前端代码限制大小不超过2M

如果不是很复杂的项目，代码限制在2M内是可以的，在项目中比较占空间的是images文件夹下的图片，我们可以将较大的图片存储在云上，通过外链引入，就可以不占用本地空间，我用到的是阿里云的OSS云存储。

2、设置tabBar时，iconPath必须使用本地图片

除了图片路径有规定，图片的大小和尺寸都有相应的规范，官方文档如下，图片大小不超过40kb,建议尺寸为81px*81px，图片超过40kb会报错。

图标图片建议使用网上一些矢量库里的图标，如阿里巴巴矢量图库，这些矢量图标基本只有几kb。

3、小程序js文件中指向变量的方式

在做小程序之前用的是vue做web开发，指向变量的形式是< this.变量名>，

在小程序里用的是< this.data.变量名>的形式，这一点可以从小程序为变量赋值的形式理解。

小程序为变量赋值的形式是：

this.setData({

变量名:变量值

})

4、微信小程序分享给别人，打开后提示页面不存在

onShareAppMessage中的url要写成“pages/path/pathname”的形式，而不是相对路径“../path/pathname”的形式。

5、小程序自动更新

小程序上线后，会有更新维护上线新版本，如果没有自动更新功能，那么之前使用的用户就没有办法获取最新的版本。

官方文档里有更新的相关API，请自行查阅，我自己的程序是这样写的，程序写在app.js中。

    // 自动更新
    const updateManager = wx.getUpdateManager()

    updateManager.onCheckForUpdate(function (res) {
      // 请求完新版本信息的回调
      console.log(res.hasUpdate)
      // if (res.hasUpdate == true) {
      //   updateManager.applyUpdate()
      // }
    })

    updateManager.onUpdateReady(function () {
      updateManager.applyUpdate()
      wx.showModal({
        title: '更新提示',
        content: '新版本已经准备好，是否重启应用？',
        success: function (res) {
          if (res.confirm) {
            // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
            updateManager.applyUpdate()
          }
        }
      })
    })
  
    updateManager.onUpdateFailed(function () {
      // 新的版本下载失败
    })

6、服务器域名必须使用https协议

在小程序中使用 API 时，每个微信小程序需要事先设置一个通讯域名，小程序只可以跟指定的域名进行网络通信，配置时需要注意：域名只支持 https (request、uploadFile、downloadFile) 和 wss (connectSocket) 协议。

使用http协议的域名会报错。

微信小程序开发记录总结

猜你喜欢