目录
一.生命周期
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中完成的