学习微信小程序及知识占及v-if与v-show差异

时间 2019-12-14

标签学习微信程序知识差异繁體版

原文原文链接

注意点：html

1、接口调用方式：vue

getOpenid: function () {
  var that = this;
  return new Promise(function (resolve, reject) {
    wx.login({
      success: function (res) {
        //code 获取用户信息的凭证
        //调用接口获取登陆凭证（code）。经过凭证进而换取用户登陆态信息，
        // 包括用户的惟一标识（openid）及本次登陆的会话密钥（session_key）等。
        // 用户数据的加解密通信须要依赖会话密钥完成。
        if (res.code) {
          //请求获取用户openid
          wx.request({
            url: that.globalData.ctxUrl + "/wx/onLogin",
            data: { "code": res.code },
            method: 'POST',
            header: {
              'content-type': 'application/x-www-form-urlencoded'
            },
            success: function (res) {
              wx.setStorageSync("useropenid", res.data.body.openid);
              wx.setStorageSync("platformId", res.data.body.platformId);
              var res = {
                status: 200,
                data: res.data.body.openid
              }
              // 在外面调用app.getOpenid时就会将res传到then方法的第一个参数里面
              resolve(res);
            }
          });
        } else {
          console.log('获取用户登陆态失败！' + res.errMsg)
          reject('error');
        }
      }
    })
  });
}
先在app.js文件里写一个公共方法调wx.login接口获取code,而后将这个code传后后端，后端会经过这个code调用微信接口，而后返回userid和platformId,而后存到缓存里，
在调其它接口的时候就须要传这个userid和platformId等。

app.getOpenid().then(function(res) {
  if (res.status == 200) {
    var userId1 = wx.getStorageSync("useropenid");
    var platformId1 = wx.getStorageSync('platformId');
    that.setData({
        userId: wx.getStorageSync("useropenid"),
        platformId: wx.getStorageSync('platformId')
      }),

      wx.request({
        url: app.globalData.ctxUrl + '/wx/partOfHomeDetails',
        data: {
          "userId": userId1,
          "platformId": platformId1,
          "photo": photo,
          "userName": userName
        },
        method: 'POST',
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        success: function (result) {
          wx.setStorageSync("userid", result.data.body[0].userId);
          that.setData({
            list: result.data.body
          })
        }
      })


小程序调接口经过token的方法以下：

每次推送触发以前都会检查一下是否过时，若是过时，从新执行一下后端的 getAccessToken 的方法去获取
code换openId的话
小程序每次打开的时候都执行一下onLogin的方法拿code
而后把这个code传给后端，后端返回openid等值，后端再把相关的openId+session_key生成一个Token再返回给小程序(也就是你再调一个接口它返给你token)
而后小程序的全部请求把这个Token带上访问就能够了
相关的话能够去了解下JWT

git

以上是微信小程序如何调用后端接口的实例

2、能够用block标签上加判断条件，block自己不会显示在页面上github

3、v-if与hidden属性区别，hidden每一次要渲染，标签会存在，可是至关于设置了display:none,小程序

而v-if只有条件知足才渲染，不然不渲染，若是不渲染标签是不会显示在页面上的后端

`v-if` vs `v-show`

v-if 是“真正”的条件渲染，由于它会确保在切换过程当中条件块内的事件监听器和子组件适当地被销毁和重建。微信小程序

v-if 也是惰性的：若是在初始渲染时条件为假，则什么也不作——直到条件第一次变为真时，才会开始渲染条件块。api

相比之下，v-show 就简单得多——无论初始条件是什么，元素老是会被渲染，而且只是简单地基于 CSS 进行切换。缓存

通常来讲，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。所以，若是须要很是频繁地切换，则使用 v-show 较好；若是在运行时条件不多改变，则使用 v-if 较好。服务器

四，用wx:for-item能够改变遍历时取值时不用item.id了，能够用i.id了

5、template模板

6、知识点网站

https://github.com/CruxF/WXsmallProgram

https://wendux.github.io/dist/#/doc/flyio/wx

须要了解的网站：

https://www.v2ex.com/t/519999?p=1

一个mpvue项目中基于flyio实现的可更新cookie的拦截器

https://juejin.im/post/5c11d2b0e51d4514b3526a62

了解下flyio(fly.js)

7、

一、上线流程：

(微信小程序若是用原生的开发，上线时先将全部代码保证最新代码后点小程序的右上角的上线，须要输入版本号啥的，在管理员的版本管理里就会有你刚提交的那个版本了，而后管理员会点提交审核，审核经过后下面就会出现打包发布的按钮，管理员就能够发布了)

须要，build以后点上传，而后在小程序管理后台的版本管理那里提交审核，审核经过了就能够发布上线了

上小程序的编辑器里能够看到上传那个按

在微信小程序的官网里有版本管理，能够点开看下

某一个账号可让多我的管理，能够在成员管理里添加成员的微信号

2：若是想让其它人使用本身的项目，可让另外一方在新建项目里点进去，而后会出来这样的条码，而后你扫下另外一方就能够进来你的项目了

8、用token调后端接口

也能够用cookie去操做和更新token的:

cookie既能够在响应拦截器里根据后端提示过时再请求而后更新也行，也能够本身在本地校验是否过时，直接在请求发起前就更新cookie

9、比较重要的几个api调用的微信接口

wx.login():：调用接口获取登陆凭证（code）。

经过凭证进而换取用户登陆态信息，包括用户的惟一标识（openid）及本次登陆的会话密钥（session_key）等。

code

string

用户登陆凭证（有效期五分钟）。开发者须要在开发者服务器后台调用 code2Session，使用 code 换取 openid 和 session_key 等信息

wx.getAccountInfoSync():获取当前账号信息，用它能够取到appid

const accountInfo = wx.getAccountInfoSync() console.log(accountInfo.miniProgram.appId) // 小程序 appId console.log(accountInfo.plugin.appId) // 插件 appId console.log(accountInfo.plugin.version) // 插件版本号， 'a.b.c' 这样的形式

wx.canIUse():判断小程序的API，回调，参数，组件等是否在当前版本可用。

使用 ${API}.${method}.${param}.${options} 或者 ${component}.${attribute}.${option} 方式来调用
${API}.${method}.${param}.${options}${component}.${attribute}.${option}

wx.canIUse('button.open-type.getUserInfo')

wx.authorize:提早向用户发起受权请求。

调用后会马上弹窗询问用户是否赞成受权小程序使用某项功能或获取用户的某些数据，但不会实际调用对应接口。若是用户以前已经赞成受权，则不会出现弹窗，直接返回成功。

注意：下面的scope下有不少属性分别表明不一样的受权，最后调用的方法要与scope下的属性相对应，如微信运动受权，就调scope下的微信运动属性，受权成功后再调运动的方法

// 能够经过 wx.getSetting 先查询一下用户是否受权了 "scope.record" 这个 scope wx.getSetting({ success(res) { if (!res.authSetting['scope.record']) { wx.authorize({ scope: 'scope.record', success() { // 用户已经赞成小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问 wx.startRecord() } }) } } })

wx.getSetting():获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限。

(就是查看它的受权信息，哪些功能受权了，哪些功能没受权，若是已经受权了，就直接调用经受权的方法，若是没有受权就调用wx.authorize()进行受权，受权后再调用功能方法)

wx.getSetting({
  success: res => {
    if (res.authSetting['scope.userInfo']) {
      //scope它下面有不少属性分别表明不一样的权限，这里的scope.userInfo是指调用户信息的权限
      // 已经受权，能够直接调用 getUserInfo 获取头像昵称，不会弹框
      wx.getUserInfo({
        success: res => {
          // 能够将 res 发送给后台解码出 unionId
          this.globalData.userInfo = res.userInfo
          wx.setStorageSync("userPhoto", res.userInfo.avatarUrl)
          wx.setStorageSync('nickName', res.userInfo.nickName);
          // 因为 getUserInfo 是网络请求，可能会在 Page.onLoad 以后才返回
          // 因此此处加入 callback 以防止这种状况
          if (this.userInfoReadyCallback) {
            this.userInfoReadyCallback(res)
          }
        }
      })
    }
  }
})
wx.setNavigationBarTitle:为每一个页面设置title文件

wx.getUserInfto:获取用户信息

例如:像下面这样点击 “获取用户信息” 按钮

在这个按钮里绑上getuserinfo方法，在getuser里就能够取到用户信息了

这时点击获取用户信息按钮时就会调getuser方法，里面的事件对象下面就会返回用户相关信息了



十：标签组件，经常使用的标签
image:里加上mode这个属性后就是宽度固定，高度自动

scroll-view:这个标签组件能够用在滚动到底端时加载下一页的功能,要给page｛height:100%｝

这里的loading是控制下拉刷新连续触发的功能

list.push这块作的目的是下拉刷新后以前的数据还要