微信小程序知识点梳理

文章目录

微信小程序知识点梳理前言一、窗口配置？二、小程序文件类型三、小程序的生命周期以及页面的生命周期小程序的生命周期：页面的生命周期： 四、数据请求和封装首先在根目录下创建一个http文件夹，在文件夹下分别创建：env.js,api.js,request.js三个文件。好了废话不多说直接上代码。api.js代码如下:request.js代码如下： 五、路由跳转分类和路由跳转传递参数小程序的路由跳转共有六种 传递参数简单的数据直接使用url传递跳转页面在onLoad()函数会获取到一个option（自定义名）的参数，该参数就包含了六、路由配置 七、点击获取参数八、本地存储的几种方式小程序的本地存储主要有两种：同步和异步同步：异步 总结

---

前言

---

一、窗口配置？

窗口配置其实在微信官方文档的小程序里面有详细的全局配置，最常用的就是路由，底部导航tabbar，导航栏的文本，背景颜色，窗口的背景色等，下面附上图片

在app.json中配置 效果图

二、小程序文件类型

每个页面都是由四个文件组成：分别为wxml(相当于html文件)，js、wxss(相当于css文件)、json， 作用： wxml 相当于html文件,就是用来写也页面的内容 js 相当于script内写的内容，用来写页面的功能效果 wxss相当于css文件，主要是用来设置页面的样式 json主要用来配置路由，以及页面的基础配置，如果要用到UI组件，引入就引入在json文件中

三、小程序的生命周期以及页面的生命周期

小程序的生命周期：

每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。

// app.js App({ onLaunch (options) {//生命周期函数–监听小程序初始化（当小程序初始化完成时，会触发 onLaunch（全局只触发一次）。） // Do something initial when launch. }, onShow (options) {//生命周期函数–监听小程序显示（当小程序启动，或从后台进入前台显示，会触发 onShow） // Do something when show. }, onHide () {//生命周期函数–监听小程序隐藏（当小程序从前台进入后台，会触发 onHide） // Do something when hide. }, onError (msg) {//错误监听函数（当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息） console.log(msg) }, globalData: 'I am global data'// globalName是数据，这里面的函数和数据都是全局的。 })

页面的生命周期：

对于小程序中的每个页面，都需要在页面对应的 js 文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等。

简单的页面可以使用 Page() 进行构造：

//index.js Page({ data: { text: "This is page data." }, onLoad: function(options) { // 页面创建时执行 }, onShow: function() { // 页面出现在前台时执行 }, onReady: function() { // 页面首次渲染完毕时执行 }, onHide: function() { // 页面从前台变为后台时执行 }, onUnload: function() { // 页面销毁时执行 }, onPullDownRefresh: function() { // 触发下拉刷新时执行 }, onReachBottom: function() { // 页面触底时执行 }, onShareAppMessage: function () { // 页面被用户分享时执行 }, onPageScroll: function() { // 页面滚动时执行 }, onResize: function() { // 页面尺寸变化时执行 }, onTabItemTap(item) { // tab 点击时执行 console.log(item.index) console.log(item.pagePath) console.log(item.text) }, // 事件响应函数 viewTap: function() { this.setData({ text: 'Set some data for updating view.' }, function() { // this is setData callback }) }, // 自由数据 customData: { hi: 'MINA' } })

四、数据请求和封装

首先在根目录下创建一个http文件夹，在文件夹下分别创建：env.js,api.js,request.js三个文件。好了废话不多说直接上代码。

env.js代码如下

//设置公共访问的url，即环境变量 module.exports = { // 开发环境 dev: { baseUrl: 'http://localhost:3000' }, // 测试环境 test: { baseUrl: 'www.test.com' }, // 线上环境 prod: { baseUrl: 'https://api.it120.cc' } }

api.js代码如下:

// 引入request请求 const { request } = require('./request.js') // 基于业务封装的接口 module.exports = { /** * 拿封装商品列表举例 */ // url,method,data getGoodsList: () => { // console.log('获取商品列表方法') return request('/shop/goods/list','POST',{},true); //第一个参数为地址，第二个参数为请求方式，第三个参数为传递的参数，第四个参数为是否需要token }, //.........可以根据自己的数据继续封装 ;

request.js代码如下：

// 引入env中的url const { baseUrl } = require('./env.js').prod // 专属域名 const subDomain = 'agai' module.exports = { /**二次封装wx.request() * url:请求的接口地址 * method:请求方式 * data传参 * */ request: (url, method = 'GET', data = {}, isSubDomain) => { // console.log(baseUrl) let _url = `${baseUrl}/${isSubDomain?subDomain:''}${url}` return new Promise((resolve, reject) => { wx.showLoading({ title:"正在加载" }) wx.request({ url: _url, data: data, method: method, header: { 'content-type': 'application/x-www-form-urlencoded' }, success: (res) => { // console.log(res) let {code}=res.data if(code==0){ wx.hideLoading() resolve(res.data) }else{ wx.showToast({ title: '数据请求失败', }) } } }) }) } }

五、路由跳转分类和路由跳转传递参数

小程序的路由跳转共有六种

wx.switchTab({//1、跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 url: '/index' }) wx.reLaunch({//2、关闭所有页面，打开到应用内的某个页面 url: 'test?id=1' }) wx.redirectTo({//3、关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面 url: 'test?id=1' }) wx.navigateTo({//4、保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。 url: 'test?id=1', events: { // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据 acceptDataFromOpenedPage: function(data) { console.log(data) }, someEvent: function(data) { console.log(data) } ... }, success: function(res) { // 通过eventChannel向被打开页面传送数据 res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' }) } }) wx.navigateBack({//5、关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。 delta: 2 }) //6、EventChannel页面间事件通信通道 //方法 EventChannel.emit(string eventName, any args) //触发一个事件 EventChannel.on(string eventName, EventCallback fn) //持续监听一个事件 EventChannel.once(string eventName, EventCallback fn) //监听一个事件一次，触发后失效 EventChannel.off(string eventName, EventCallback fn) //取消监听一个事件。给出第二个参数时，只取消给出的监听函数，否则取消所有监听函数

传递参数

简单的数据直接使用url传递

如：发送给跳转页面

wx.navigateTo({ url: '../detail/detail?id=1' })

跳转页面在onLoad()函数会获取到一个option（自定义名）的参数，该参数就包含了

Page({ onLoad(options) { console.log(options) } })

它会log出id

六、路由配置

配置路由：在app.json中配置，代码如下

"pages":[ "pages/home/home", "pages/classify/classify", "pages/shopcar/Shopcar", "pages/mine/Mine", "pages/index/index", "pages/logs/logs", "pages/home/homedetail/ShopDetail", "pages/login/login" ],

其实可以直接配置路由，它就会根据你设置的路由，自动生成相对应的文件

七、点击获取参数

点击获取参数，就是在点击事件中获取参数，比如要获取id，代码如下注意data-id:

//shop.wxml //用data-id传递id <view class="recommend-item" wx:for="{{goods}}" wx:key="index" bindtap="detail" data-id="{{item.id}}"> <image src="{{item.pic}}"></image> <text class="name">{{item.name}}</text> <view class="money"> <text>￥{{item.minPrice}}</text> <text>￥{{item.originalPrice}}</text> </view> //js detail:function(e){ let id=e.currentTarget.dataset.id//通过e.currentTarget.dataset接收到id(可以log一下e，看是否有你需要的参数) wx.navigateTo({ url: "./homedetail/ShopDetail?id="+id, }) },

八、本地存储的几种方式

小程序的本地存储主要有两种：同步和异步

同步：

try { wx.setStorageSync('key', 'value')//1、存储值 } catch (e) { } try { wx.removeStorageSync('key')//2、移除指定的值 } catch (e) { // Do something when catch error } try { var value = wx.getStorageSync('key')//3、 获取值 if (value) { // Do something with return value } } catch (e) { // Do something when catch error } try { const res = wx.getStorageInfoSync()//4、 获取当前 storage 中所有的 key console.log(res.keys) console.log(res.currentSize) console.log(res.limitSize) } catch (e) { // Do something when catch error } try { wx.clearStorageSync()//5、清除所有的key } catch(e) { // Do something when catch error }

异步

wx.setStorage({//1、将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。 key:"key", data:"value"}) wx.removeStorage({//2、从本地缓存中移除指定 key key: 'key', success (res) { console.log(res) }}) wx.getStorageInfo({// 3、获取当前 storage 中所有的 key success (res) { console.log(res.keys) console.log(res.currentSize) console.log(res.limitSize) } }) wx.getStorage({//4、 获取值 key: 'key', success (res) { console.log(res.data) } }) wx.clearStorage()//5、清除所有的key

该处使用的url网络请求的数据。

---

总结

以上所述，为自己理解和经验，如果有不正确的地方，欢迎指正，本篇博客如果对你有用，希望可以关注一下哟~~