目录
一.生命周期
1、注册小程序生命周期:
app.js:
// app.js App({ onLaunch() { // 展示本地存储能力 const logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) // 登录 wx.login({ success: res => { // 发送 res.code 到后台换取 openId, sessionKey, unionId } }) }, onShow (options) { // Do something when show. console.log("显示") }, onHide () { // Do something when hide. console.log("隐藏") }, onError (msg) { console.log(msg) }, globalData: { userInfo: null } })
2、注册页面生命周期
index.js:
// index.js // 获取应用实例 const app = getApp() //var是全局变量的 //let是局部变量 //const定义常量 Page({ data: { motto: 'Hello World', userInfo: {}, hasUserInfo: false, canIUse: wx.canIUse('button.open-type.getUserInfo'), canIUseGetUserProfile: false, canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false }, onLoad() { if (wx.getUserProfile) { this.setData({ canIUseGetUserProfile: true }) } }, onLoad: function(options) { // 页面创建时执行 console.log("onLoad") }, onShow: function() { // 页面出现在前台时执行 console.log("onShow") }, onReady: function() { // 页面首次渲染完毕时执行 console.log("onReady") }, onHide: function() { // 页面从前台变为后台时执行 console.log("onHide") }, onUnload: function() { // 页面销毁时执行 console.log("onUnload") } })
生命周期图:
二、页面路由
在小程序中所有页面的路由全部由框架进行管理。
1.页面栈
框架以栈的形式维护了当前的所有页面。 当发生路由切换的时候,页面栈的表现如下:
路由方式 | 页面栈表现 |
---|---|
初始化 | 新页面入栈 |
打开新页面 | 新页面入栈 |
页面重定向 | 当前页面出栈,新页面入栈 |
页面返回 | 页面不断出栈,直到目标返回页 |
Tab 切换 | 页面全部出栈,只留下新的 Tab 页面 |
重加载 | 页面全部出栈,只留下新的页面 |
开发者可以使用 getCurrentPages()
函数获取当前页面栈。
2.路由方式
对于路由的触发方式以及页面生命周期函数如下:
路由方式 | 触发时机 | 路由前页面 | 路由后页面 |
---|---|---|---|
初始化 | 小程序打开的第一个页面 | onLoad, onShow | |
打开新页面 | 调用 API wx.navigateTo 使用组件 <navigator open-type="navigateTo"/> | onHide | onLoad, onShow |
页面重定向 | 调用 API wx.redirectTo 使用组件 <navigator open-type="redirectTo"/> | onUnload | onLoad, onShow |
页面返回 | 调用 API wx.navigateBack 使用组件<navigator open-type="navigateBack"> 用户按左上角返回按钮 | onUnload | onShow |
Tab 切换 | 调用 API wx.switchTab 使用组件 <navigator open-type="switchTab"/> 用户切换 Tab | 各种情况请参考下表 | |
重启动 | 调用 API wx.reLaunch 使用组件 <navigator open-type="reLaunch"/> | onUnload | onLoad, onShow |
index.wxml文件:
<!--index.wxml--> <view class="container"> <!-- view就相当于div--> <!-- text是行内形式的view--> <text>{{motto}}</text> <navigator url="/pages/logs/logs" open-type="redirect">点我去首页</navigator> </view>
三、wxml
1、列表渲染
在index.js中定义:
在index.wxml文件中遍历:在map中,i就是键,e就是值,wx:key="*this"是标识,不加上会报错
<!--index.wxml--> <view class="container"> <!-- view就相当于div--> <!-- text是行内形式的view--> <text>{{motto}}</text> <navigator url="/pages/logs/logs" open-type="redirect">点我去首页</navigator> <view wx:for="{{cities}}" wx:for-item="e" wx:for-index="i" wx:key="*this"> {{e}}-{{i}} </view> </view>
2、条件渲染
index.wxml文件:
<view wx:if="false">你好</view>
此处会认定为true,因为false这样表达只是一个文字。js中除了空字符外的所有文字都是true
正确的表达为:
<view wx:if="{{false}}">你好</view>
四.image标签
新建目录放图片:
index.wxml文件:
<image src="/asset/1.png"></image>
五、movable-area与movable-view
index.wxml文件:
<movable-area style="width:300px;height:300px;background:yellow"> <movable-view direction="all"> <image src="/asset/1.png" style="width:100px;height:100px"></image> </movable-view> </movable-area>
00.一个小程序页面由四个文件组成,分别是:
xxx
xxx.js 页面逻辑
xxx.json 页面配置
xxx.wxml 页面结构
xxx.wxss 页面样式
01.小程序框架组成
在小程序中 ,通过App()来注册一个小程序 ,通过Page()来注册一个页面
1.逻辑层
1.注册小程序
2.注册页面
3.页面生命周期
4.页面路由
5.模块化
6.API
2.视图层
1.wxml
2.wxss
3.wxs
wxs是微信小程序自身的脚本语言,用来过滤和计算。wxs可以通过文件可模块标签来定义,文件需要.wxs后缀文件
wxs是专门用于wxml页面的,如果你有在页面中使用js脚本的需求可以使用,但是wxs是不能被其它js文件引用的
实际开发应该根据情况,选择使用js或wxs,但本人的绝大部分开发都是用js中完成的