欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

微信小程序开发的总结

程序员文章站 2022-05-05 22:09:49
...

1.微信小程序仅支持https请求,在开发时,可以设置官方编辑器中的详情->勾选“不检验合法域名....”,使用http开发、测试

2.由于小程序每个页面的cookie=“SESSIONID”处于变化中,使用session时,在发送https请求在header中设定cookie的值,不过不建议这样,建议在采用在redis保存信息,key保存在stroge中,value保存在redis中。

3.小程序登录流程

微信小程序开发的总结

3.1登录流程:
  1. 客户端(微信小程序)发起请求 request
  2. weapp-session-client 包装 request

    • 首次请求

      • 调用 wx.login() 和 wx.getUserInfo() 接口获得 coderawData 和 signature
      • requset 的头部带上 coderawData 和 signature
      • 保存 code 供下次调用
    • 非首次请求

      • request 的头部带上保存的 code
  3. 服务器收到请求 request,中间件从头部提取 coderawData 和 signature 字段

    • 如果 code 为空,跳到第 4 步
    • 如果 code 不为空,且 rawData 不为空,需要进行签名校验

      • 使用 codeappidapp_secret 请求微信接口获得 session_key 和 openid

        • 如果接口失败,响应 ERR_SESSION_KEY_EXCHANGE_FAILED
      • 使用签名算法通过 rawData 和 session_key 计算签名 signature2
      • 对比 signature 和 signature2

        • 签名一致,解析 rawData 为 wxUserInfo

          • 把 openid 写入到 wxUserInfo
          • 把 (code, wxUserInfo) 缓存到 Redis
          • 把 wxUserInfo 存放在 request.$wxUserInfo 里
          • 跳到第 4 步
        • 签名不一致,响应 ERR_UNTRUSTED_RAW_DATA
    • 如果 code 不为空,但 rawData 为空,从 Redis 根据 code 查询缓存的用户信息

      • 找到用户信息,存放在 request.$wxUserInfo 字段里,跳到第 4 步
      • 没找到用户信息(可能是过期),响应 ERR_SESSION_EXPIRED
  4. request 被业务处理,可以使用 request.$wxUserInfo 来获取用户信息(request.$wxUserInfo 可能为空,业务需要自行处理)

3.2流程图总结
  1. code 是微信用户的登录凭证,打开小程序登录的时候获取的只属于微信这个用户的登录凭证,需要注意的是,这个登录凭证只供微信小程序使用的。
  2. session_key 是微信用户在小程序里面的登录态信息,相当于是微信给这个用户颁发的一个登录 session,官网地址

    • 他有一个过期时间{"session_key":"...","expires_in":7200,"openid":"..."},需要定期使用wx.checkSession检测。
  3. openId ,用户的唯一标识
  4. unioinId,如果开发者拥有多个移动应用、网站应用、和公众帐号(包括小程序),可通过unionid来区分用户的唯一性,因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号(包括小程序),用户的unionid是唯一的。换句话说,同一用户,对同一个微信开放平台下的不同应用,unionid是相同的。
  5. 一般来说,openId 就是微信用户的唯一标识,但是因为微信产品很多,所以会出现多个微信产品使用不同的 openId 来标识用户,但是对于我们做业务接入的话,就买办法使用了,所以建议是统一使用 unioinid,因为一般来说,一般的业务都会有公众号,小程序联合使用的。
  6. 3rd_session 是一般是指我们自己公司的服务器的 session,一般来说,可以跟原来的业务的 session 一起使用,不过这个 session 的过期时间一定要比小程序的session_key 的过期时间要长,这样可以减少 session 的多次重复创建,另外一般我们自己公司的服务器的 session 管理都会使用类似 redis 之类的数据库进行管理的,这个大致了解一下,因为其他文章会提到。
  7. 为什么要用2个 sessionsession_key 和3rd_session),那是因为session_key是微信的登录态,3rd_session是我们业务系统的登录态,两边各有一个登录态,所以需要将2个登录态合并为一个 session,在这里面是合并为3rd_session,并保存到我们业务系统上,然后每次需要使用的时候,小程序带上这个3rd_session访问我们的业务系统,通过处理,可以返回我们需要 unioinid 和其他 session 信息而不用每次都去获取一个新的session_key(因为微信有限制code 的使用,要用 code 换 session_key),总的来说,就是使用3rd_session来管理小程序的登录

4.import和include的区别:

import是引用模板文件

<!--item.wxml-->
<template name="item">
 <text>{{text}}</text>
</template>
<!--引用item.wxml-->
<import src="item.wxml" />
<template is="item" data="{{text:'forbar}}" />

include是引用除模板以外的文件

<!--index.wxml-->
<include src="header.wxml" />
<view>body</view>
<include src="footer.wxml"/>
<!--header.wxml-->
<view>header</view>
<!--footer.wxml-->
<view>footer</view>

5.链接组件

wx.navigateTo:保留当前页面,即可以返回,触发当前页面的hide事件

wx.redirectTo:不保留当前页面,页面的左上角没有“返回键”,在跳转的时候,会触发当前页面的hide,unlock事件

wx.switchTab:跳到在app.json配置的导航页面,关闭其他所有非tabBar页面,并且路径中不可以带参数

wx.navigateTo和wx.redirectTo不能跳到tabbar页面

6.生命周期函数

onLoad:页面加载时,一个页面只触发一次

onShow:页面显示时,每打开一次触发一次

onReady:页面初次渲染完成时,一个页面只触发一次

onHide:页面隐藏时,当navigateTo和底部tab切换时触发

onUnload:页面卸载,redirectTo和navigateBack调用时触发


7.<web-view src=""  /> 其中src和页面iframe必须在官网中  业务服务器 进行配置,才能访问,而且一个页面只能配置一个,自动全屏,遮挡其他的节点


8.input绑定bindchange属性,以获取input输入的值

<!--index.wxml-->
<input bindchange="bindChange"/>

<!--index.js-->
page({
   data:{
     inputContent:{}
},
   bindChange:function(e){
     inputContent[e.currentTarget.id] = e.detail.value
}
})

9.改变窗口的背景颜色

page{

background-color:red;

}

10.事件

10.1     分为两种:冒泡事件,触发子组件,会触发给父组件的事件

 非冒泡事件:触发子组件,不会触发父组件的事件

10.2     绑定事件的格式

bind+事件名称  = 函数名                                                     catch+事件名称  = 函数名       

基础库1.5.0以后 可以:bind:事件名称 = 函数名                  catch:事件名称 = 函数名

使用bind不会阻止冒泡事件    使用catch会阻止冒泡事件

10.3    事件的捕捉阶段

从基本库1.5.0开始,支持触摸事件的捕捉阶段,在冒泡事件的触发之前,并与冒泡事件的触发组件顺序相反

格式 capture-bindcapture-catch,后者将阻止捕捉阶段和阻止冒泡事件,例子如下:

<view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    inner view
  </view>
</view>

这样的点击inner组件,只触发handleTap2函数

10.4  事件对象

触发事件,在函数中将接受事件对象,将其console.log打印如下

{
"type":"tap",//触发事件类型
"timeStamp":895,//触发事件的时间戳
"target": {//触发事件的组件的属性
  "id": "tapTest",
  "dataset":  {//在组件中设定的属性 
    "hi":"WeChat"//data-hi="WeChat"
  }
},
"currentTarget":  {//当前事件的组件的一个属性
  "id": "tapTest",
  "dataset": {
    "hi":"WeChat"
  }
},
"detail": {//
  "x":53,
  "y":14
},
"touches":[{//触摸动作的属性
  "identifier":0,
  "pageX":53,
  "pageY":14,
  "clientX":53,
  "clientY":14
}],
"changedTouches":[{//
  "identifier":0,
  "pageX":53,
  "pageY":14,
  "clientX":53,
  "clientY":14
}]
}

11.模块的使用

<wxs  src=""    module="" />标签 

module:命名规则:必须以字母,数字和下划线组成,并且不以数字开头

建议在同一个wxml文件中,使用唯一的module,否则后面的会覆盖前面。

// /pages/tools.wxs

var foo = "'hello world' from tools.wxs";
var bar = function (d) {
  return d;
}
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";
<!-- page/index/index.wxml -->

<wxs src="./../tools.wxs" module="tools" />
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.FOO)}} </view>