小程序知识总结

小程序知识总结（一）

1.窗口配置

在小程序中有个配置全局的文件app.json，里面有很多配置项，现在说一下窗口的配置项：window。

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 #000000
navigationBarTextStyle	string	white	导航栏标题颜色，仅支持 black / white
navigationBarTitleText	string		导航栏标题文字内容
navigationStyle	string	default	导航栏样式，仅支持以下值：default 默认样式custom 自定义导航栏，只保留右上角胶囊按钮。
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	string	dark	下拉 loading 的样式，仅支持 dark / light
backgroundColorTop	string	#ffffff	顶部窗口的背景色，仅 iOS 支持
backgroundColorBottom	string	#ffffff	底部窗口的背景色，仅 iOS 支持
enablePullDownRefresh	boolean	false	是否开启全局的下拉刷新。
onReachBottomDistance	number	50	页面上拉触底事件触发时距页面底部距离，单位为 px。
pageOrientation	string	portrait	屏幕旋转设置，支持 auto / portrait / landscape

HexColor类型的需要使用十六进制颜色值；
代码示例：

"window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }

这里引用的官方文档，详情请到https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
查看。

2.小程序文件类型

小程序的文件类型常用的有：
一般都是配置好路由之后自动生成的，有四种类型，
后缀是wxml的文件和普通的html文件差不多就是里面的标签换了一个名字，
后缀是wxss的文件和css文件一样，css怎么写wxss就怎么写，只是后缀名换了一下，
还有就是json文件和js文件了，如图：

3.小程序生命周期和小程序页面生命周期

小程序的生命周期主要有应用生命周期，页面生命周期和组件生命周期，今天主要说应用生命周期和页面生命周期。

应用生命周期：

生命周期名	作用
onLaunch	监听小程序初始化。小程序初始化完成时（全局只触发一次）
onShow	监听小程序显示。小程序启动，或从后台进入前台显示时
onHide	监听小程序隐藏。小程序从前台进入后台时。
onError	错误监听函数。小程序发生脚本错误，或者 api 调用失败时触发，会带上错误信息
onPageNotFound	页面不存在监听函数。小程序要打开的页面不存在时触发，会带上页面信息回调该函数

页面生命周期：

生命周期名	作用
onLoad	生命周期回调—监听页面加载
onReady	生命周期回调—监听页面初次渲染完成
onShow	生命周期回调—监听页面显示
onHide	生命周期回调—监听页面隐藏
onUnload	生命周期回调—监听页面卸载
onPullDownRefresh	监听用户下拉动作
onReachBottom	页面上拉触底事件的处理函数
onShareAppMessage	用户点击右上角转发
onPageScroll	页面滚动触发事件的处理函数
onResize	页面尺寸改变时触发
onTabItemTap	当前是 tab 页时，点击 tab 时触发

内容来源于lilicat的博客。

4.数据请求和封装

数据的封装和请求看下面代码：
在utils文件夹里创建http.js文件和api.js文件，在http.js文件中写入下面代码：

const http = '公共请求地址';
// post请求
function postRequest(url,data){
  return new Promise((resolve,reject)=>{
    let that = this;
    let postData = data;
    wx.request({
      url:http + url,
      data:postData,
      method:'POST',
      header:{
        'content-type':'application/x-www-form-urlencoded'
      },
      success:(res)=>{
        resolve(res)
      },
      fail:(err)=>{
        reject('请求错误')
      }
    })
  })
}

// get请求
function getRequest(url,data){
  return new Promise((resolve,reject)=>{
    let that = this;
    let postData = data;
    wx.request({
      url:http + url,
      data:postData,
      method:'GET',
      header:{
        'content-type':'application/json'
      },
      success:(res)=>{
        resolve(res)
      },
      fail:(err)=>{
        reject('请求错误')
      }
    })
  })
}

module.exports = {
  getRequest,
  postRequest
}

在api.js文件中写入：

const https = require('./http');

// 详情
let detail = (data)=>{//get请求
  return https.getRequest('shop/goods/detail?id=' + data)
}
let details = (data)=>{//post请求
  return https.getRequest('shop/goods/detail'， data)
}

module.exports = {
  detail,
  details ,
}

在用到封装的js文件中：

let api = require('api.js路径');
api.detail(data)

5.路由跳转分类和路由跳转传递参数

路由跳转大致分为两类：可以跳转tabbar和不可以跳转tabbar；

可以跳转tabbar的有：

wx.switchTab：跳转到tabbar页面并关闭所有非tabbar页面，不能传参；
wx.reLaunch：跳转到应用的某个页面，并关闭所有页面，可以通过拼接地址传递参数；

不可以跳转tabbar的有：

wx.redirectTo:关闭所有页面，并跳转到应用内的某个非tabbar页面，可以通过拼接地址传递参数；
wx.navigateTo：保留当前页面，跳转到应用内的某个非tabbar页面，可以通过拼接地址传递参数；
wx.navigateBack：关闭当前页面，返回上级或多级页面

6.路由配置

用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。
未指定 entryPagePath 时，数组的第一项代表小程序的初始页面（首页）。
小程序中新增/减少页面，都需要对 pages 数组进行修改。
例：配置index、logs文件夹以及里面的四个文件

{
  "pages": ["pages/index/index", "pages/logs/logs"]
}

7.点击获取参数

在wxml中的元素上可以用 data-(属性名) 来声明一个自定义属性，在js文件中通过点击事件来获取声明的这个属性，例如：
申明属性

//这个是属性名接收变量
<view wx:for="{{classlist}}" wx:key="index" bindtap="getitem" data-id="{{item.id}}">

//这个是属性名接收字符串
<view wx:for="{{classlist}}" wx:key="index" bindtap="getitem" data-id="字符串">

获取自定义属性的值

getitem(e) {//函数中的固有值，用于获取元素的所有属性
	//打印出e之后找到currentTarget属性或者Target属性下面的dataset属性，就可以看到要获取的值了
    console.log(e.currentTarget.dataset.id)
  },

8.本地存储和获取的几种方式

1.本地存储

wx.setStorage：异步将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。
wx.setStorageSync：wx.setStorage的同步版本。

2.获取本地存储

wx.getStorage：从本地缓存中异步获取指定 key 的内容。
wx.getStorageSync：wx.getStorage的同步版本。

3.删除本地存储

wx.removeStorage：从本地缓存中移除指定 key。
wx.removeStorageSync：wx.removeStorage的同步版本。

4.清除本地存储

wx.clearStorage：清理本地数据缓存。
wx.clearStorageSync：wx.clearStorage的同步版本。