1.配置页面路径
"pages/home/home", "pages/goodDetail/goodDetail", "pages/classify/classify", "pages/shoppingTrolley/shoppingTrolley", "pages/mine/mine"2.window 配置全局默认的窗口
"window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "天使童装", "navigationBarTextStyle": "black" },3.tabar 导航条
"tabBar": { "list": [{ "pagePath": "pages/home/home", "text": "首页", "iconPath": "image/nav/home-off.png", "selectedIconPath":"./image/nav/home-on.png" }, { "pagePath": "pages/classify/classify", "text": "分类", "iconPath": "image/nav/ic_catefory_normal.png", "selectedIconPath":"./image/nav/ic_catefory_pressed.png" }, { "pagePath": "pages/shoppingTrolley/shoppingTrolley", "text": "购物车", "iconPath": "image/nav/cart-off.png", "selectedIconPath":"./image/nav/cart-on.png" }, { "pagePath": "pages/mine/mine", "text": "我的", "iconPath": "image/nav/my-off.png", "selectedIconPath":"./image/nav/my-on.png" }] },.wxml布局文件 .wxss样式文件 .js逻辑处理 .json配置文件
小程序生命周期:
onLauch:首次打开小程序,全局只触发一次。 onShow:初始化完成后,触发监听小程序显示。 onHide:从前台进入后台触发。 onError:小程序后台运行一定时间,或系统资源占用过高,会被销毁小程序页面的生命周期:
onLoad:页面加载时触发。一个页面只会调用一次 onShow:页面载入后触发onShow方法,显示页面,每次打开页面都会调用一次; onReady:首次显示页面,会触发onReady方法,渲染页面和样式,一个页面只会调用一次; onHide:当小程序后台运行或跳转到其他页面时,触发onHide方法; onUnload:页面卸载时触发。如redirecTo或navigteBack数据请求:
wx.request({ url: 'https://api.it120.cc/skx/shop/goods/list', header: { "Content-Type": "application/x-www-form-urlencoded" }, data:{ x:"", y:"" }, success: (res)=> { console.log(res) } })封装
首先创建俩个js文件 分别是api.js和http.js 第一步在http.js封装get和post export function get(url,params){ return new Promise((resolve,reject)=>{ wx.request({ url: 'https://api.it120.cc/skx/'+url, data:params, header:{ "Content-Type": "application/x-www-form-urlencoded" }, method:"get", success:(res)=>{ resolve(res) }, fail:(err)=>{ reject(res) } }) }) } export function post(url,params){ return new Promise((resolve,reject)=>{ wx.request({ url: 'https://api.it120.cc/skx/'+url, data:params, header:{ "Content-Type": "application/x-www-form-urlencoded" }, method:"post", success:(res)=>{ resolve(res) }, fail:(err)=>{ reject(res) } }) }) } 然后在api.js中引入get和post的请求方式 import {get,post}from "./http" 接着请求接口使用封装好的方法 export function lieList(url,params){ return get(url,params) } 最后在页面中引入要使用的接口 import {lieList } from "../../utils/http/api"路由跳转有四种方式,分别是:
1.wx.navigateTo(); 2.wx.redirectTo(); 3.wx.switchTab(); 4.wx.navigateBack();navigateTo是将原来的页面保存在页面栈中,在跳入到下一个页面的时候目标页面也进栈,只有在这个情况下点击手机的返回按钮才可以跳转到上一个页面;
redirectTo和switchTab都是先清除栈中原来的页面,然后目标页面进栈,使用这两种跳转方式,都不能通过系统的返回键回到上一个页面,而是直接退出小程序;
redirectTo使用的时候一定要配合tabBar或是页面里面可以再次跳转按钮,否则无法回到上一个页面;
switchTab跳转的页面必须是tabBar中声明的页面;
tabBar中定义的字段不能超过5个页面,小程序的页面栈层次也不能超过5层。
navigateBack只能返回到页面栈中的指定页面,一般和navigateTo配合使用。
wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面,只能用 wx.switchTab 跳转到 tabbar 页面
路由跳转示例代码
1.wx.navigateTo();
wx.navigateTo({ url: 'pages/home/home?id=1' })2.wx.redirectTo()
wx.redirectTo({ url: 'pages/home/home?id=1' })3.wx.switchTab()
wx.switchTab({ url: '/index' //tabBar中声明的页面 })4.wx.navigateBack()
// 此处是A页面* wx.navigateTo({ url: 'B?id=1' }) *// 此处是B页面* wx.navigateTo({ url: 'C?id=1' }) *// 在C页面内 navigateBack,将返回A页面* //可通过 getCurrentPages()) 获取当前的页面栈,决定需要返回几层 wx.navigateBack({ delta: 2 })参数传递示例代码
wx.navigateTo({ url: 'pages/home/home?id=1' }) 参数与路径之间使用?分隔,参数与参数之用=相连,不同参数用&分隔 上面代码中id为参数键,1为参数值 在页面中onLoad()方法中option对象即为参数对象,可以通过参数键来取参数值路由配置如下
{ "pages": [ "pages/index/index", "pages/search/search", "pages/shopCart/shopCart", "pages/mine/mine" ] }路由跳转如下
wx.navigateTo:打开新页面时调用,
wx.redirectTo:页面重定向调用,
wx.navigateBack页面返回调用或用户按左上角返回按钮,
wx.switchTab:Tab切换时调用或用户切换Tab
wxml:
通过data-来传递
<view bindtap="getList" data-id="{{item.id}}"></view>js:
通过e.currentTarget.dataset来接收后面跟的是data-后面的名字
getList(e){ console.log(e); var id=e.currentTarget.dataset['id']; }一、同步
1.wx.setStorageSync()//存储值
1. try { 2. wx.setStorageSync('key', 'value') 3. }2.wx.removeStorageSync()//移除指定的值
try { wx.removeStorageSync('key') }3.wx.getStorageSync()//获取值
try { var value = wx.getStorageSync('key') }4.wx.getStorageInfoSync()//获取当前storage中所有的key
try { const res = wx.getStorageInfoSync() console.log(res.keys) console.log(res.currentSize)//获取的key值 console.log(res.limitSize) }5.wx.clearStorageSync()//清除所有的key
try { wx.clearStorageSync() }二、异步
1.wx.setStorage()//存储值
将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。数据存储生命周期跟小程序本身一致,即除非用户主动删除或超过一定时间被自动清理,否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB。
wx.setStorage({ key:"key", data:"value" })2.wx.removeStorage(); // 移除指定的值
wx.removeStorage({ key: 'key', success (res) { console.log(res) }})3.wx.getStorage(); // 获取值
wx.getStorage({ key: 'key', success (res) { console.log(res.data) }})4.wx.getStorageInfo(); // 获取当前 storage 中所有的 key
wx.getStorageInfo({ success (res) { console.log(res.keys) console.log(res.currentSize) console.log(res.limitSize) }})5.wx.clearStorage(); // 清除所有的key
wx.clearStorage()