小程序知识总结（一）

1.窗口配置

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

属性类型默认值描述navigationBarBackgroundColorHexColor#000000导航栏背景颜色，如 #000000navigationBarTextStylestringwhite导航栏标题颜色，仅支持 black / whitenavigationBarTitleTextstring导航栏标题文字内容navigationStylestringdefault导航栏样式，仅支持以下值：default 默认样式custom 自定义导航栏，只保留右上角胶囊按钮。backgroundColorHexColor#ffffff窗口的背景色backgroundTextStylestringdark下拉 loading 的样式，仅支持 dark / lightbackgroundColorTopstring#ffffff顶部窗口的背景色，仅 iOS 支持backgroundColorBottomstring#ffffff底部窗口的背景色，仅 iOS 支持enablePullDownRefreshbooleanfalse是否开启全局的下拉刷新。onReachBottomDistancenumber50页面上拉触底事件触发时距页面底部距离，单位为 px。pageOrientationstringportrait屏幕旋转设置，支持 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的同步版本。