wx小程序基本使用

文章目录
1.目录结构
2.引入Vant
3简单的双向数据绑定
4.路由跳转
5.事件
6.请求接口数据
7.组件分装
8.生命周期钩子函数
9.使用promise分装wx.request
10.本地存储的使用
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)=>{
	  return 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)
	      }})})}
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()