微信小程序开发总结

如下进行一些微信小程序开发过程中自己遇到的一些问题的总结

1.leancloud的使用

①准备工作部分详情请参考leancloud官方文档:《在微信小程序中使用leancloud》
注意：需要将av-weapp-min.js 下载下来存放进微信小程序的project中，如:我将其放在utils的目录中

②要使用 LeanCloud 的数据存储、用户系统、调用云引擎等功能，需要使用 LeanCloud 存储 SDK:《javaScript SDK安装指南》

下面引用一个自己开发过程中的实例，具体语法请阅读官方文档
app.js

const Cloud = require('./utils/av-weapp-min.js');              //引用对应目录下的av-weapp-min.js文件
Cloud.init({
  appId: '',                     //此处填写你的对应的appId
  appKey: ''                    //此处填写你的对应的appKey
})

注:关于appId和appKey的查看:打开LeanCloud 【数据管理】→【设置】→【应用Key】

xxx.js
在需要的页面中配置查询

    var query = new Cloud.Query('Roles');
    query.find().then(function(res) {
        var arr = [];
        var Len = res.length;
        for (var i = 0; i < Len; i++) {
          arr.push(res[i].attributes);
          console.log(arr[i]['name'])
        }
      }, function(error) {
        console.log('获取失败')
      }),

leancloud中的数据库表属性

微信小程序的控制台中打印结果：
管理员
理发师
用户

由于leancloud是一种不需要先建立数据库表的“无规则”存储方式，故可以直接在小程序中声明，具体情况可以参看官方文档。

实例：
xxx.js

      var Users = Cloud.Object.extend('UsersInfor');
      var users = new Users()
      users.set('userId',that.data.logid)
      users.set('sex',that.data.sex)
      users.set('password',that.data.password)
      users.save().then(function (users) {
        // 成功保存之后，执行其他逻辑.
        console.log('New object created with objectId: ' + users.id);
      }, function (error) {
        // 异常处理
        console.error('Failed to create new object, with error message: ' + error.message);
      });

第一次调用上面的函数时，会在leancloud数据管理页中新建一个名为“UsersInfor”的class对象，并且拥有用户定义的属性列userId,sex,password

2.当前页面与多页面传值

在此引用一下认为写的比较好的博客：微信小程序页面间传值

①方法一可在跳转的url后面 + ？要传的变量名 = 变量值
例如：wx.switchTab({ url: '../my/my?id=1' })
即可在跳转的页面的data数据中找到id的值

②运用setStorage与getStorage / setStorageSync与getStorageSync的设置缓存的方法，一种为同步设置缓存，一种为异步设置缓存，区别与其他语言相同，具体用法参考微信小程序文档
设置缓存的页面

var that = this
 wx.setStorage({
              key: 'login',
              data: that.name
            }),

需要获取缓存数据的页面

    var that = this;
    wx.getStorage({
      key: 'login',
      success: function (res) {
        that.setData({
          name: res.data
        })
        // console.log(res.data)
      },
    })

还有缓存的清除方法这里就不多做介绍

3.wx:if 与 hidden的区别

<view class='my_middle' wx:if="{{name=='用户'}}"> 当wx:if中的值为true的情况下则显示当前view，name为之前上述所设置的缓存，当为true时即显示对应模块

hidden是值为true的时候隐藏

注意一个坑：页面加载先执行onLoad，再执行的onShow，当需要随着页面跳转而刷新数据缓存(storage)时，将缓存的函数写在onShow中

4.this

this指向的是当前对象，当在函数中或者success等函数中上下切换时指定的作用域会发生变化，这时候我们通常备份一份this var that=this 这样在调用that.data.name时便不会报错

更新于2019-2-14

最后编辑于：2019.02.14 11:18:33