微信小程序的使用

1.目录结构

2.组件封装

我一般是在根目录下创建components文件夹，在文件夹中快速生成子组件，在子组件中的.js文件中配置该组件的功能，利用properties来接收父组件的传值,在父组件中.json文件中利用usingComponents引入子组件，然后在父组件中以子组件名称为标签使用，并向子组件传递值。

3.wx.request()封装

首先在根目录下创建env目录,创建index.js配置并导出多个开发环境。
开发环境、测试环境可以使用http，生产环境必须用https。

module.exports={
	//开发环境
Dev:{
	"BaseUrl":"https://www.develep.com"
},
	//测试环境
Test:{
	"BaseUrl":"https://www.test.com"
},
 //生产环境
Prod:{
	"BaseUrl": "https://api.douban.com"
}
}

然后在创建http目录及api.js文件fetch.js以及http.js文件；

• 在api.js中统一管理，请求的url地址

• 在fetch.js中用promise对wx.request()进行封装

    //封装wx.request()网络模块
    module.exports=(url,method,data)=>{
      let p=new Promise((resolve,reject)=>{
        wx.request({
          url: url,
          method:method,
          data:Object.assign({},data),
          header:{'Content-Type': 'application/text' },
          success(res){
            resolve(res)
          },
          fail(err){
            reject(err)
          }
        })
      })
      return p;
    }
  

• 在http.js，根据当前环境，设置相应的baseUrl, 引入fetch中封装好的promise请求，封装基础的get\post\put\upload等请求方法，设置请求体，带上token和异常处理等

    const evn=require('../env/index.js')
    const api=require('./api')
    const fetch = require('./fetch')
    //确定开发环境
    let baseUrl=evn.devBaseUrl;
    //如果接口需要token鉴权，获取token
    let token=wx.getStorageSync('token');
    
    //轮播请求函数
    function banner(){
      return fetch(baseUrl+api.banner,'get',{})
    }
    //list列表函数
    
    //分类接口函数
    
    module.exports={
      banner
    }
  

• 在全局app.js中导入http,注册到根组件

    const http=require('./http/http.js')
    App({
      http,
    })
  

• 在使用时

    const app = getApp();
    Page({
       list:[]
      }
    onLoad: function () {
        app.http.banner().then((res)=>{
                    this.setData({
                        list: res.data.list
            		})   
            })
    }
  

4.底部tap的实现

在app.json加入以下配置即可（其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。）

"tabBar": {
"list": [
  {
    "pagePath": "路径",
    "text": "路径文字"
  },
]

5.双向数据绑定与父子传值

在小程序中普通的绑定是单向的，

而双向数据绑定是利用model:前缀

父子组件传值也可以用双向数据绑定，子组件是利用properties来接收父组件的传值

6.上拉加载

通过小程序中的scroll-view组件来设置加载数据。
案例
官方文档

7.本地存储

同步
wx.setStorageSync(); //存储值
wx.getStorageSync(); // 获取值
wx.removeStorageSync(); // 移除指定的值
wx.getStorageInfoSync(); // 获取当前 storage 中所有的 key
wx.clearStorageSync(); // 清除所有的key
异步
wx.setStorage(); //存储值
wx.removeStorage(); // 移除指定的值
wx.getStorage(); // 获取值
wx.getStorageInfo(); // 获取当前 storage 中所有的 key
wx.clearStorage(); // 清除所有的key

8.跳转页面方式

navigateTo （有返回键，不可以跳转到tabBar页面）
switchTab （没有返回键，只能跳转到tabBar页面，不可以携带参数）
reLaunch (跳转任意页面， 没有返回， 有 首页 按钮)
redirectTo ( 只可以跳转tabBar 页面， 没有返回，但有首页按钮)
navigateBack (应用在目标页面， delta值为1 ，表示跳转上一页，2表示跳两级)
wx.navigateBack({
   delta:1
})

传参注意：

跳转页面传递数组参数必须序列化

 let  arr=[1,2,3,4,5]
 category = JSON.stringify(arr)        //取子集分类 数组传递需要序列化
 wx.navigateTo({
    url: `/pages/detail/detail/?cate= ${category} `,
 })

跳转页面传递数组参数必须序列化

onLoad: function (options) {
let  category = JSON.parse(options.cate);
	 console.log(category)
}

参数值过长接收时候内容不全得问题

//传参
wx.navigateTo({//wx.redirectTo、wx.reLaunch
    url: '/pages/details/details?id=' + encodeURIComponent(id)
})

//接收
onLoad(options) {
    var id = decodeURIComponent(options.id);
}

navigator组件实现

//url是跳转路径  open-type是跳转方式，默认是navigateTo
跳转到新页面
跳转到新页面
跳转到新页面

9.v-html怎么解决？

用 rich-text 组件来实现
它是利用nodes来动态绑定数据

数据格式化如下：

// 如：img
.replace(/\

10.数据接口是from-data参数怎么解决？

只需在请求数据中是加请求头即可，其他一样

header: {
      'content-type': 'application/x-www-form-urlencoded'
},

11.微信授权登录

第一步：登录流程
前端—>后端—>腾讯服务器
wx.login—>wx.request—>后端—>小程序(腾讯)服务器

1.首先封装请求接口
2.点击登录按钮，执行processLogin方法
3.判断该方法，如果有userInfo，就调用register注册方法
注册需要三个参数
iv 加密值
code
encryptedData 加密数据
4.执行登录的login方法，通过登录拿到token，并保存token
5.登陆成功触发onShow()，获取用户详细信息
6.退出登陆，并删除token，利用wx.reLaunch跳转当前页面，从而达到页面刷新。
详细信息请点这里

12.获取dom节点

createSelectorQuery 创建节点查询器
在后面利用 .select(标签名) 来获取单个dom节点
.selectAll(标签名) 来获取所有节点
在后面在加上 .boundingClientRect() 来获取该节点的位置信息
可以利用 .exec()方法 执行所有的请求。请求结果按请求次序构成数组

13.生命周期

生命周期是指一个小程序从创建到销毁的一系列过程
在小程序中 ，通过App()来注册一个小程序 ，通过Page()来注册一个页面
全局

• 用户首次打开小程序，触发 onLaunch 方法（全局只触发一次）。
• 小程序初始化完成后，触发 onShow 方法，监听小程序显示。
• 小程序从前台进入后台，触发 onHide 方法。
• 小程序从后台进入前台显示，触发 onShow 方法。
• 小程序后台运行一定时间，或系统资源占用过高，会被销毁。
• 全局的 getApp() 函数可以用来获取到小程序 App 实例。

页面

• 小程序注册完成后，加载页面，触发onLoad方法。
• 页面载入后触发onShow方法，显示页面。
• 首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次。
• 当小程序后台运行或跳转到其他页面时，触发onHide方法。
• 当小程序有后台进入到前台运行或重新进入页面时，触发onShow方法。
• 当使用重定向方法wx.redirectTo(object)或关闭当前页返回上一页wx.navigateBack()，触发onUnload。

14.支付流程

视频讲解