微信小程序基本使用

1.目录结构

1.pages目录
	新增页面并进行配置
2.utils目录
	我们工具脚本文件
3.app.js
	全局逻辑脚本
4.app.wxss
	全局样式文件
5.app.json
	全局配置文件

2.引入Vant

1.npm init 初始化
2.npm install  --production
3.npm i @vant/weapp -S --production
4.然后点击工具/构建npm,构建完成,会生成 miniprogram_npm 文件夹
5.在需要的文件里面引入
"usingComponents": {}

3简单的双向数据绑定

1.普通的属性是单向的如:<input value="{{value}}" />
1.1需要使用this.setData({ value: 'leaf' }) 来更新
2.<input model:value="{{value}}" />

4.路由跳转

//编程式跳转
XXXXX: function () {
	wx.navigateTo({
	url: "../logs/logs",
	})
},
//标签跳转，相当于a标签
<navigator url="/page/navigate/navigate"跳转到新页面</navigator>

//open-type
navigator 跳转到//是开启一个新页面，那个页面是隐藏了
redirect 重定向
switchTab 跳转到某个tab
navigateBack 回退
reLaunch 重加载

//API跳转
wx.navigateTo(object) （有返回键，不可以跳转到tabBar页面）
wx.redirectTo(object) ( 只可以跳转tabBar 页面， 没有返回，但有首页按钮)
wx.switchTab(object) （没有返回键，只能跳转到tabBar页面，不可以携带参数）
wx.navigateBack(object) (应用在目标页面， delta值为1 ，表示跳转上一页，2表示跳两级)
wx.reLaunch(object) (跳转任意页面， 没有返回， 有 首页 按钮)
wx.onunload(object) （关闭所有页面，打开到应用内的某个页面）

5.事件

1.bindtap(当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数)
2.

6.请求接口数据

let that=this
wx.request({
      url: '', 
      data: {},
      method: 'get',
      header: {
        'content-type': 'application/json' // 默认值
      },
      success(res) {  //要注意this指向
        that.setData({})
      }
    })

7.组件分装

1.根目录下创建一个components目录
2.在components目录下创建w-swiper目录
3.在js文件里面配置
	 properties: {
		变量名:{
		  type:数据类型,
		  value:默认值
		}
	  },
4.在pages文件夹里面需要的文件里的json文件里添加
	"usingComponents": {
	    "w-swiper":"/components/w-swiper"
	 }
5.在wxml文件写入

8.生命周期钩子函数

1.onLoad// 生命周期函数--监听页面加载
2.onReady// 生命周期函数--监听页面初次渲染完成
3.onShow// 生命周期函数--监听页面显示
4.onHide// 生命周期函数--监听页面隐藏
5.onUnload // 生命周期函数--监听页面卸载
6.onPullDownRefresh // 页面相关事件处理函数--监听用户下拉动作
7.onReachBottom // 页面上拉触底事件的处理函数

9.使用promise分装wx.request

1.在跟目录写创建一个http文件夹
2.在文件夹里写入fetch.js和http.js文件
3.在fetch.js里进行promise的分装
	module.exports=(url,method,data,token=true)=>{
	  return new Promise((resolve,reject)=>{
	    wx.request({
	      url,url,
	      method:method,
	      data:Object.assign({},data),
	      header:token?{"Content-Type": "application/text"}:{"content-type":"application/x-www-form-urlencoded"},
	      success(res){
	        resolve(res)
	      },
	      fail(err){
	        reject(err)
	      }})})}
4.在http文件里进行api分装
	const evn=require('../env/index.js')
	const fetch = require('./fetch')
	//确定开发环境
	let baseUrl=“地址”
	let banner="/后缀"
	//如果接口需要token鉴权，获取token
	let token=wx.getStorageSync('token');
	//轮播请求函数
	function banner(){
	  return fetch(baseUrl+banner,'get',{})
	}
	module.exports={
	  banner
	}
5.在全局app.js中导入http,注册到根组件
	const http=require('./http/http.js')
	App({
	  http,
	})
6.在具体页面的js文件里导入
	const app = getApp();		//获取应用实例
	Page({
	  data: {
	   list:[]
	  }
	onLoad: function () {
	    app.http.banner().then((res)=>{
	                this.setData({
	                    list: res.data.list
	        })    })
	}

10.本地存储的使用

1.存 wx.setStorageSync('key', 'value')
2.取 wx.getStorageSync('key')
3.移除指定的值wx.removeStorageSync('key')
4.获取当前 storage 中所有的 key，wx.getStorageInfoSync()
5.清除所有的key，wx.clearStorageSync()
异步操作
1.存 wx.setStorage({key:"key",data:"value"})
2.取  wx.getStorage({key: 'key',success (res) {console.log(res.data)}})
3.移除指定的值 wx.removeStorage({key: 'key',success (res) {console.log(res)}})
4.获取当前 storage 中所有的 key，wx.getStorageInfo({success (res) {console.log(res.limitSize)}})
5.清除所有的key，wx.clearStorage()

11.实现v-html

<rich-text nodes="{{html}}"></rich-text>

let app =getApp()
Page({
  data: {
    html:''
  },
  onLoad: function (options) {
    app.http.leibiaoxq().then(res=>{
      console.log(res.data);
      this.setData({
        html:res.data.data.content.replace(/\<img/g, '<img style="width:100%;height:auto;"')
      })
    })
  }
})

12.获取dom节点

<view>
    <text class="title" id="productServe">产品服务</text>
    <text class="title" id="enterpriseServe">企业服务</text>
    <text class="title" id="normalServe">常用应用</text>
</view>

Page({
  //声明节点查询的方法
  queryMultipleNodes: function() {
    const query = wx.createSelectorQuery()                // 创建节点查询器 query
    query.select('#productServe').boundingClientRect()    // 这段代码的意思是选择Id=productServe的节点，获取节点位置信息的查询请求
    query.select('#enterpriseServe').boundingClientRect() // 这段代码的意思是选择Id=enterpriseServe的节点，获取节点位置信息的查询请求
    query.select('#normalServe').boundingClientRect()     // 这段代码的意思是选择Id=normalServe的节点，获取节点位置信息的查询请求
    query.selectViewport().scrollOffset()                 // 这段代码的意思是获取页面滑动位置的查询请求
    query.exec((res) => {
      res[0].top                                          // #productServe节点的到页面顶部的距离
      res[1].width                                        // #enterpriseServe节点的宽度
      res[2].height                                       // #normalServe节点的高度
    })
  }
})

微信小程序支付流程

用户点击登录
调用支付统一下单api
返回支付订单信息
返回支付参数
用户确认支付
鉴权调起支付
返回支付结果
显示支付结构
更新订单状态