【愚公系列】《微信小步伐开发解析》003-小步伐框架（项目文件和逻辑层） ...

    作者简介，愚公搬代码
《头衔》：华为云特约编辑，华为云云享专家，华为开发者专家，华为产物云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
《近期荣誉》：2022年度博客之星TOP2，2023年度博客之星TOP2，2022光阴为云十佳博主，2023光阴为云十佳博主等。
《博客内容》：.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小步伐等相关范畴知识。
欢迎 点赞✍评论⭐收藏
  
  

---

媒介

小步伐框架是一种提供基础开发框架和工具的软件开发框架，用于简化和加速小步伐应用步伐的开发过程。小步伐框架提供了一套规范和标准，帮助开发者快速构建小步伐应用并管理应用的布局、数据流和页面之间的交互。
一、小步伐框架

1.新建项目

新建一个小步伐项目，删除多余的示例步伐，保存最小步伐聚集。调整后的步伐如图所示。

2.步伐清单

2.1 app.js

1. // app.js
2. App({
3.    
4.   /**
5.    * 当小程序初始化完成时，会触发onLaunch（全局只触发一次）
6.    */
7.   onLaunch() {
8.    
9.     // 展示本地存储能力
10.     const logs = wx.getStorageSync('logs') || []
11.     logs.unshift(Date.now())
12.     wx.setStorageSync('logs', logs)
14.     // 登录
15.     wx.login({
16.    
17.       success: res => {
18.    
19.         // 发送 res.code 到后台换取 openId, sessionKey, unionId
20.       }
21.     })
22.   },
23.   /**
24.    * 当小程序启动，或从后台进去前台显示时，会触发onShow
25.    */
26.   onShow(opt){
27.    
29.   },
30.   /**
31.    * 当小程序从前台进入后台时，会触发onHide
32.    */
33.   onHide(opt){
34.    
36.   },
37.   /**
38.    * 当小程序发生脚本错误，或API调用失败时，会触发onError并带上错误信息
39.    */
40.   onError(msg){
41.    
43.   },
44.   globalData: {
45.    
46.     userInfo: null
47.   }
48. })

复制代码

2.2 app.json

1. {
2.    
3.   "pages": [
4.     "pages/index/index"
5.   ],
6.   "window": {
7.    
8.     "backgroundTextStyle":"light",
9.     "navigationBarTextStyle": "black",
10.     "navigationBarTitleText": "Weixin",
11.     "navigationBarBackgroundColor": "#ffffff"
12.   },
13.   "style": "v2",
14.   "sitemapLocation": "sitemap.json"
15. }

复制代码

2.3 index.js

1. // pages/index/index.js
2. Page({
3.    
5.   /**
6.    * 页面的初始数据
7.    */
8.   data: {
9.    
11.   },
13.   /**
14.    * 生命周期函数--监听页面加载
15.    */
16.   onLoad(options) {
17.    
19.   },
21.   /**
22.    * 生命周期函数--监听页面初次渲染完成
23.    */
24.   onReady() {
25.    
27.   },
29.   /**
30.    * 生命周期函数--监听页面显示
31.    */
32.   onShow() {
33.    
35.   },
37.   /**
38.    * 生命周期函数--监听页面隐藏
39.    */
40.   onHide() {
41.    
43.   },
45.   /**
46.    * 生命周期函数--监听页面卸载
47.    */
48.   onUnload() {
49.    
51.   },
53.   /**
54.    * 页面相关事件处理函数--监听用户下拉动作
55.    */
56.   onPullDownRefresh() {
57.    
59.   },
61.   /**
62.    * 页面上拉触底事件的处理函数
63.    */
64.   onReachBottom() {
65.    
67.   },
69.   /**
70.    * 用户点击右上角分享
71.    */
72.   onShareAppMessage() {
73.    
75.   }
76. })

复制代码

3.相应式数据绑定

3.1 index.js 文件

1. // pages/index/index.js
2. Page({
3.    
5.   /**
6.    * 页面的初始数据
7.    */
8.   data: {
9.    
10.     arg: 'this is test'  // 定义页面的初始数据，包括一个名为 arg 的属性，值为 'this is test'
11.   },
13.   but_click() {
14.    
15.     // 点击 button 时的处理函数
16.     this.setData({
17.    
18.       arg: '点击button修改的变量'  // 修改 arg 的值为 '点击button修改的变量'
19.     })
20.   }
21. })

复制代码

在这个文件中，我们定义了一个页面的基础布局。Page 函数用于注册一个页面，并吸收一个对象作为参数，这个对象定义了页面的初始数据、生命周期函数和事件处置惩罚函数。

• data 对象定义了页面的初始数据。在这里，我们定义了一个键 arg，值为 'this is test'。
  
• but_click 方法是一个事件处置惩罚函数，会在用户点击绑定了 bindtap="but_click" 的按钮时被调用。调用 this.setData 方法，更新 data 对象中的 arg 属性，将其值改为 '点击button修改的变量'。
  

3.2 index.wxml 文件

1. <!--pages/index/index.wxml-->
2. <view>
3.   {
4.   {arg}}
5. </view>
6. <input value="{
7.     {arg}}" />
8. <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 文件

1. /* pages/index/index.wxss */
2. input {
3.    
4.   border: 1px solid black;  /* 定义 input 标签的边框 */
5. }
6. input, view, button {
7.    
8.   margin: 100rpx;  /* 定义 input, view 和 button 标签的外边距 */
9. }

复制代码

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修改的变量'。  
    
  
  

在模仿器直接输入不点按钮值是不会变的。

至此说明小步伐数据是单向绑定的。
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)
  

该函数在小步伐初始化完成时触发，全局只触发一次，通常用于初始化工作，比如登录、获取用户信息等。

1. App({
2.    
3.   

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。