【愚公系列】《微信小步伐开发解析》003-小步伐框架（项目文件和逻辑层）
https://img-blog.csdnimg.cn/f665420ef44c40e6a2a11c2cedd9d036.gif#pic_center作者简介，愚公搬代码
《头衔》：华为云特约编辑，华为云云享专家，华为开发者专家，华为产物云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
《近期荣誉》：2022年度博客之星TOP2，2023年度博客之星TOP2，2022光阴为云十佳博主，2023光阴为云十佳博主等。
《博客内容》：.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小步伐等相关范畴知识。
欢迎 点赞✍评论⭐收藏
媒介
小步伐框架是一种提供基础开发框架和工具的软件开发框架，用于简化和加速小步伐应用步伐的开发过程。小步伐框架提供了一套规范和标准，帮助开发者快速构建小步伐应用并管理应用的布局、数据流和页面之间的交互。
一、小步伐框架
1.新建项目
新建一个小步伐项目，删除多余的示例步伐，保存最小步伐聚集。调整后的步伐如图所示。
https://i-blog.csdnimg.cn/direct/af7dfa2fbd2b4bdf9c74ec8cd9e29021.png
2.步伐清单
2.1 app.js
// app.js
App({
/**
* 当小程序初始化完成时，会触发onLaunch（全局只触发一次）
*/
onLaunch() {
// 展示本地存储能力
const logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
},
/**
* 当小程序启动，或从后台进去前台显示时，会触发onShow
*/
onShow(opt){
},
/**
* 当小程序从前台进入后台时，会触发onHide
*/
onHide(opt){
},
/**
* 当小程序发生脚本错误，或API调用失败时，会触发onError并带上错误信息
*/
onError(msg){
},
globalData: {
userInfo: null
}
})
2.2 app.json
{
"pages": [
"pages/index/index"
],
"window": {
"backgroundTextStyle":"light",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "Weixin",
"navigationBarBackgroundColor": "#ffffff"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
2.3 index.js
// pages/index/index.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
3.相应式数据绑定
3.1 index.js 文件
// pages/index/index.js
Page({
/**
* 页面的初始数据
*/
data: {
arg: 'this is test'// 定义页面的初始数据，包括一个名为 arg 的属性，值为 'this is test'
},
but_click() {
// 点击 button 时的处理函数
this.setData({
arg: '点击button修改的变量'// 修改 arg 的值为 '点击button修改的变量'
})
}
})
在这个文件中，我们定义了一个页面的基础布局。Page 函数用于注册一个页面，并吸收一个对象作为参数，这个对象定义了页面的初始数据、生命周期函数和事件处置惩罚函数。
[*]data 对象定义了页面的初始数据。在这里，我们定义了一个键 arg，值为 'this is test'。
[*]but_click 方法是一个事件处置惩罚函数，会在用户点击绑定了 bindtap="but_click" 的按钮时被调用。调用 this.setData 方法，更新 data 对象中的 arg 属性，将其值改为 '点击button修改的变量'。
3.2 index.wxml 文件
<!--pages/index/index.wxml-->
<view>
{
{arg}}
</view>
<input value="{
{arg}}" />
<button bindtap="but_click">点击button</button>
WXML 文件定义了页面的布局和内容。
[*]<view> 标签用于显示数据 arg（初始值为 'this is test'），通过双大括号语法 { {arg}} 绑定到 data 中的 arg 属性。
[*]<input> 标签的 value 属性同样绑定到 arg，显示一个初始值为 'this is test' 的输入框。
[*]<button> 标签绑定了点击事件 bindtap="but_click"，按钮文字为 “点击button”。当按钮被点击时，会调用 index.js 文件中的 but_click 方法。
3.3 index.wxss 文件
/* pages/index/index.wxss */
input {
border: 1px solid black;/* 定义 input 标签的边框 */
}
input, view, button {
margin: 100rpx;/* 定义 input, view 和 button 标签的外边距 */
}
WXSS 文件定义了页面的样式。
[*]input 标签的 border 属性设置了一个玄色的 1 像素实线边框。
[*]input, view, 和 button 标签都被设置了 margin: 100rpx，这意味着这些元素的外边距都为 100 相对像素（rpx 是微信小步伐中的相对单元）。
3.4 交互流程解析
[*] 初始状态：
[*]页面加载时，arg 的初始值为 'this is test'。
[*]view 标签显示 'this is test'。
[*]input 标签的 value 为 'this is test'。
[*] 按钮点击：
[*]用户点击按钮，触发 but_click 方法。
[*]but_click 方法调用 this.setData，更新 arg 的值为 '点击button修改的变量'。
[*]因为数据绑定，view 和 input 标签的内容也会自动更新为 '点击button修改的变量'。
https://i-blog.csdnimg.cn/direct/325cc0a78b074996a449fd2894319492.png
在模仿器直接输入不点按钮值是不会变的。
https://i-blog.csdnimg.cn/direct/d39a76f18a5245d1aad865db95dfac33.png
至此说明小步伐数据是单向绑定的。
4.逻辑层
在微信小步伐开发中，App、Page、getApp 和 getCurrentPages 是几个重要的全局方法和函数，用于管理应用步伐的生命周期、页面的生命周期以及页面之间的导航和数据传递。
4.1 App 函数
在微信小步伐中，App 方法用于注册整个小步伐的应用实例，并且继承一个包含各种属性和方法的对象作为参数。这个对象主要包含应用生命周期函数、全局数据和自定义方法。以下是 App 方法的参数表及其详细说明：
App 方法参数表
[*] 生命周期函数
[*]onLaunch(options)：当小步伐初始化完成时触发，全局只触发一次。
[*]onShow(options)：当小步伐启动或从后台进入前台显示时触发。
[*]onHide()：当小步伐从前台进入后台时触发。
[*]onError(error)：当小步伐发生脚本错误或 API 调用失败时触发，带上错误信息。
[*]onPageNotFound(options)：当页面不存在时触发。
[*]onUnhandledRejection(res)：当未处置惩罚的 Promise 拒绝时触发。
[*] 全局数据和自定义方法
[*]globalData：自定义的全局数据，可以在小步伐的任何页面通过 getApp() 获取应用实例，从而访问全局数据。
[*]自定义的方法：可以在对象中定义任意方法，以供全局调用。
详细说明
[*]onLaunch(options)
该函数在小步伐初始化完成时触发，全局只触发一次，通常用于初始化工作，比如登录、获取用户信息等。
App({
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]