一、微信小程序的搭建
1、工具（请下载稳定版）：Stable Build
二、目录结构
1、目录整体介绍
- pages 页面文件夹
index 首页
logs 日志
- utils
util 工具类(mina框架自动生成,你也可以建立一个比如：api)
- app.js 入口js(类似于java类中的main方法)、全局js
- app.json 全局配置文件
- app.wxss 全局样式文件
- project.config.json 跟你在详情中勾选的配置一样
- sitemap.json 用来配置小程序及其页面是否允许被微信索引这个应用里面有 很多子页面,可以在里面配置,来指定当前页面能否在微信内搜 索 只需要在发布时使用
2、页面组成
xxx
xxx.js 页面逻辑
xxx.json 页面配置
xxx.wxml 页面结构（html）
xxx.wxss 页面样式（css）
3、小程序结构与传统web对比
| web | 小程序 | |
| 结构 | html | wxml |
| 样式 | css | wxss |
| 逻辑 | js | js |
| 配置 | 无 | json |
传统WEB项目是三层、小程序是四层结构(多了一个配置层)
小程序除了使用JS还可以使用TypeScript进行开发。新问题：JavaScript与TypeScript有什么区别？
TypeScript是Javascript的超集，实现以面向对象编程的方式使用Javascript。当然最后代码还是编译为Javascript
三、小程序的框架组成
在小程序中 ，通过App()来注册一个小程序 ，通过Page()来注册一个页面
1、逻辑层App Service
var是全局变量的
let是定义布局变量
const是定义常量
①注册小程序
每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。
// 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
}
})
},
onLaunch (options) {//初始化
// Do something initial when launch.
},
onShow (options) {//显示
// Do something when show.
console.log("开始显示")
},
onHide () {//隐藏
// Do something when hide.
console.log("隐藏")
},
onError (msg) {//错误
console.log(msg)
},
globalData: {//全局数据
userInfo: null
}
})
②注册页面
对于小程序中的每个页面，都需要在页面对应的 js 文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等
（1）使用 Page 构造器注册页面
简单的页面可以使用 Page() 进行构造。
// index.js
// 获取应用实例
const app = getApp()
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: 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")
},
onPullDownRefresh: function() {
// 触发下拉刷新时执行
console.log("onPullDownRefresh")
},
onReachBottom: function() {
// 页面触底时执行
console.log("onReachBottom")
},
onShareAppMessage: function () {
// 页面被用户分享时执行
console.log("onShareAppMessage")
},
onPageScroll: function() {
// 页面滚动时执行
console.log("onPageScroll")
},
onResize: function() {
// 页面尺寸变化时执行
console.log("onResize")
},
// 事件处理函数
bindViewTap() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad() {
if (wx.getUserProfile) {
this.setData({
canIUseGetUserProfile: true
})
}
},
getUserProfile(e) {
// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
wx.getUserProfile({
desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
success: (res) => {
console.log(res)
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
},
getUserInfo(e) {
// 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
console.log(e)
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
})
（2）使用 Component 构造器构造页面
Page 构造器适用于简单的页面。但对于复杂的页面， Page 构造器可能并不好用。
此时，可以使用 Component 构造器来构造页面。 Component 构造器的主要区别是：方法需要放在 methods: { } 里面。
Component({ data: { text: "This is page data." }, methods: { onLoad: function(options) { // 页面创建时执行 }, onPullDownRefresh: function() { // 下拉刷新时执行 }, // 事件响应函数 viewTap: function() { // ... } } })
这种创建方式非常类似于 自定义组件 ，可以像自定义组件一样使用 behaviors 等高级特性。
③页面生命周期
④页面路由
（1）页面栈
| 路由方式 | 页面栈表现 |
|---|---|
| 初始化 | 新页面入栈 |
| 打开新页面 | 新页面入栈 |
| 页面重定向 | 当前页面出栈，新页面入栈 |
| 页面返回 | 页面不断出栈，直到目标返回页 |
| Tab 切换 | 页面全部出栈，只留下新的 Tab 页面 |
| 重加载 | 页面全部出栈，只留下新的页面 |
（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 |
2、视图层View
view相当于div
text行内形式的view
(1)WXML
数据绑定
<!--wxml-->
<view> {{message}} </view>// page.js
Page({
data: {
message: 'Hello MINA!'
}
})列表渲染
<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>// page.js
Page({
data: {
array: [1, 2, 3, 4, 5]
}
})条件渲染
<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>// page.js
Page({
data: {
view: 'MINA'
}
})
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
