AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

微信小程序之框架

2023-11-10 57
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 微信小程序之框架

一.视图层

1.1. WXML

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

之后在项目中增加四个页面，分别命名为 : home，classify，orders，me


（ 可以根据自己的需求进行更改命名 ）


在项目的主体中找到 app.json 这个文件进行增加以上四个文件。


在该文件中找到 pages ，在里面进行直接页面。


  "pages":[
    "pages/home/home",
    "pages/classify/classify",
    "pages/orders/orders",
    "pages/me/me",
    "pages/user/user",
    "pages/index/index",
    "pages/logs/logs"
  ],

在我们创建的页面中 ( home ) ，在 home.wxml中 编写代码 : 

<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>
<!--wxml-->
<view> {{message}} </view>

在我们创建的页面中 ( home ) ，在 home.js的data中 编写代码 : 

  /**
   * 页面的初始数据
   */
  data: {
    message: 'Hello MINA !  欢迎进入我的世界 。。。'
  },
  • 列表渲染

在我们创建的页面中 ( home ) ，在 home.wxml中 编写代码 : 

<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>
<!--wxml-->
<view> {{message}} </view>
<!--wxml-->
<view wx:for="{{array}}" style="margin-left: 10px;"> {{item}} </view>

在我们创建的页面中 ( home ) ，在 home.js的data中 编写代码 : 

  data: {
    message: 'Hello MINA !  欢迎进入我的世界 。。。 ',
    array: [1, 2, 3, 4, 5]
  },
  • 条件渲染

在我们创建的页面中 ( home ) ，在 home.wxml中 编写代码 : 

<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>
<!--wxml-->
<view> {{message}} </view>
<!--wxml-->
<view wx:for="{{array}}" style="margin-left: 10px;"> {{item}} </view>
<!--wxml-->
<view wx:if="{{view == '1'}}"> 爱坤 </view>
<view wx:elif="{{view == '2'}}"> ikun </view>
<view wx:else="{{view == '3'}}"> 篮球 </view>

在我们创建的页面中 ( home ) ，在 home.js的data中 编写代码 : 

  /**
   * 页面的初始数据
   */
  data: {
    message: 'Hello MINA !  欢迎进入我的世界 。。。 ',
    array: [1, 2, 3, 4, 5],
    view: '2'
  },
  • 模板

在我们创建的页面中 ( home ) ，在 home.wxml中 编写代码 : 

<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>
<!--wxml-->
<view> {{message}} </view>
<!--wxml-->
<view wx:for="{{array}}" style="margin-left: 10px;"> {{item}} </view>
<!--wxml-->
<view wx:if="{{view == '1'}}"> 爱坤 </view>
<view wx:elif="{{view == '2'}}"> ikun </view>
<view wx:else="{{view == '3'}}"> 篮球 </view>
<!--wxml-->
<template name="staffName">
  <view>
    BookName: {{BookName}}, Author: {{Author}}
  </view>
</template>
<template is="staffName" data="{{...BookA}}"></template>
<template is="staffName" data="{{...BookB}}"></template>
<template is="staffName" data="{{...BookC}}"></template>

在我们创建的页面中 ( home ) ，在 home.js的data中 编写代码 : 

 /**
   * 页面的初始数据
   */
  data: {
    message: 'Hello MINA !  欢迎进入我的世界 。。。',
    array: [1, 2, 3, 4, 5],
    view: '2',
    BookA: {BookName: '八极崩', Author: '萧炎'},
    BookB: {BookName: '雨中的小丑', Author: '小丑'},
    BookC: {BookName: '愤怒的小鸟', Author: '童年'}
  },

2. WXSS

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。


WXSS 用来决定 WXML 的组件应该怎么显示。


为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。


与 CSS 相比，WXSS 扩展的特性有：


尺寸单位

样式导入


  • 尺寸单位

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度)
iPhone5 1rpx = 0.42px 1px = 2.34rpx
iPhone6 1rpx = 0.5px 1px = 2rpx
iPhone6 Plus 1rpx = 0.552px 1px = 1.81rpx

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

  • 样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，

用;表示语句结束。

方法一 :  

/** common.wxss **/
.small-p {
  padding:5px;
}

方法二 :  

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}
  • 内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

  • style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
<view style="color:yellow;" />
  • class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。
<view class="vi" />
  • 选择器
选择器 样例 样例描述
.class .intro 选择所有拥有 class="intro" 的组件
#id #firstname 选择拥有 id="firstname" 的组件
element view 选择所有 view 组件
element, element view, checkbox 选择所有文档的 view 组件和所有的 checkbox 组件
::after view::after 在 view 组件后边插入内容
::before view::before 在 view 组件前边插入内容

全局样式与局部样式 :

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。


3. WXS事件

在组件中绑定一个事件处理函数。

如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

在我们创建的页面中 ( home ) ，在 home.wxml中 编写代码 : 

<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>
<!--wxml-->
<view> {{message}} </view>
<!--wxml-->
<view wx:for="{{array}}" style="margin-left: 10px;"> {{item}} </view>
<!--wxml-->
<view wx:if="{{view == '1'}}"> 爱坤 </view>
<view wx:elif="{{view == '2'}}"> ikun </view>
<view wx:else="{{view == '3'}}"> 篮球 </view>
<!--wxml-->
<template name="staffName">
  <view>
    BookName: {{BookName}}, Author: {{Author}}
  </view>
</template>
<template is="staffName" data="{{...BookA}}"></template>
<template is="staffName" data="{{...BookB}}"></template>
<template is="staffName" data="{{...BookC}}"></template>
<button id="tapTest" data-hi="Weixin" data-name="君临沂" bindtap="tapName"> Click me! </button>

在我们创建的页面中 ( home ) ，在 home.js中编写代码 : 

// pages/home/home.js
Page({
    /**
   * 页面的初始数据
   */
  data: {
    message: 'Hello MINA !  欢迎进入我的世界 。。。',
    array: [1, 2, 3, 4, 5],
    view: '2',
    BookA: {BookName: '八极崩', Author: '萧炎'},
    BookB: {BookName: '雨中的小丑', Author: '小丑'},
    BookC: {BookName: '愤怒的小鸟', Author: '童年'}
  },
  /**
   * 方法事件
   */
  tapName: function(event) {
    console.log(event);
    console.log(event.target.dataset);
  },

所看到的效果如图如下 :

二.逻辑层

2.1.页面生命周期

思维图：

微信小程序中逻辑层的页面生命周期包括以下几个阶段：


1. onLoad：页面加载时触发，只会触发一次，可以在此处进行页面初始化操作。


2. onShow：页面显示时触发，每次页面显示都会触发，可以在此处进行数据刷新操作。


3. onReady：页面初次渲染完成时触发，只会触发一次，可以在此处进行一些界面操作，如设置导航栏标题等。


4. onHide：页面隐藏时触发，当用户切换到其他页面时触发。


5. onUnload：页面卸载时触发，当用户关闭当前页面或者返回上一页时触发，可以在此处进行一些资源释放操作。


6. onPullDownRefresh：下拉刷新时触发，用户下拉页面时触发，可以在此处进行数据刷新操作。


7. onReachBottom：上拉触底时触发，用户滑动页面到底部时触发，可以在此处进行数据加载操作。


8. onShareAppMessage：分享页面时触发，用户点击分享按钮时触发，可以在此处设置分享内容。

在逻辑层中，可以通过重写这些生命周期函数来实现页面的各种操作和逻辑。

2.2.跳转

代码:

在项目主体 app.json 中 增加以下代码:

 "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "欢迎页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    },{
      "pagePath": "pages/home/home",
      "text": "首页"
    },{
      "pagePath": "pages/me/me",
      "text": "我的"
    }]
  },

在我们创建的页面中 ( home ) ，在 home.wxml中 编写代码 : 

<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>
<!--wxml-->
<view> {{message}} </view>
<!--wxml-->
<view wx:for="{{array}}" style="margin-left: 10px;"> {{item}} </view>
<!--wxml-->
<view wx:if="{{view == '1'}}"> 爱坤 </view>
<view wx:elif="{{view == '2'}}"> ikun </view>
<view wx:else="{{view == '3'}}"> 篮球 </view>
<!--wxml-->
<template name="staffName">
  <view>
    BookName: {{BookName}}, Author: {{Author}}
  </view>
</template>
<template is="staffName" data="{{...BookA}}"></template>
<template is="staffName" data="{{...BookB}}"></template>
<template is="staffName" data="{{...BookC}}"></template>
<button id="tapTest" data-hi="Weixin" data-name="君临沂" bindtap="tapName"> Click me! </button>
<button style="margin-top: 20px;"  bindtap="bindViewTap">
home 跳转到classify页面&&一级跳二级</button>

在我们创建的页面中 ( home ) ，在 home.js中编写代码 : 

// pages/home/home.js
Page({
    /**
   * 页面的初始数据
   */
  data: {
    message: 'Hello MINA !  欢迎进入我的世界 。。。',
    array: [1, 2, 3, 4, 5],
    view: '2',
    BookA: {BookName: '八极崩', Author: '萧炎'},
    BookB: {BookName: '雨中的小丑', Author: '小丑'},
    BookC: {BookName: '愤怒的小鸟', Author: '童年'}
  },
  /**
   * 方法事件
   */
  tapName: function(event) {
    console.log(event);
    console.log(event.target.dataset);
  },
  // 事件处理函数
  bindViewTap() {
    wx.navigateTo({
      url: '/pages/classify/classify',
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    console.log("home.onLoad");
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    console.log("home.onReady");
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    console.log("home.onShow");
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
    console.log("home.onHide");
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  console.log("home.onUnload");
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  }
})

在我们创建的页面中 ( classify) ，在 classify.wxml中 编写代码 : 

<!--pages/classify/classify.wxml-->
<text>pages/classify/classify.wxml</text>
<button  bindtap="bindViewTap">
classify跳转到orders二级跳二级</button>

在我们创建的页面中 ( classify) ，在 classify.js中编写代码 : 

// pages/classify/classify.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
  },
      // 事件处理函数
      bindViewTap() {
        wx.navigateTo({
          url: '/pages/orders/orders',
        })
      },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    console.log("classify.onLoad");
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    console.log("classify.onReady");
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    console.log("classify.onShow");
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
    console.log("classify.onHide");
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  console.log("classify.onUnload");
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  }
})

在我们创建的页面中 ( orders) ，在 orders.wxml中 编写代码 : 

<!--pages/orders/orders.wxml-->
<text>pages/orders/orders.wxml</text>
<button style="margin-top: 20px;"  bindtap="bindViewTap">
orders跳转到home页面&&二级跳一级</button>

在我们创建的页面中 ( orders) ，在 orders.js中编写代码 : 

// pages/orders/orders.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
  },
        // 事件处理函数
        bindViewTap() {
          wx.switchTab({
            url: '/pages/home/home',
          })
        },
   /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    console.log("orders.onLoad");
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    console.log("orders.onReady");
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    console.log("orders.onShow");
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
    console.log("orders.onHide");
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  console.log("orders.onUnload");
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  }
})

在我们创建的页面中 ( me) ，在 me.js中编写代码 : 

// pages/me/me.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
  },
   /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    console.log("me.onLoad");
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    console.log("me.onReady");
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    console.log("me.onShow");
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
    console.log("me.onHide");
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  console.log("me.onUnload");
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  }
})

2.1.一级跳一级

效果如图 :

 

2.2.一级跳二级

效果如图 :

2.3.二级跳二级

效果如图 :

2.4. 二级跳一级

效果如图 :

  • 一级页面不会销毁
  • 一级层级跳到子级层级，或者子级层级跳到子级层级，如: 一级跳二级，二级跳二级，二级跳三级，三级跳四级，以上路由跳法，上一级隐藏，下一级显示(初次显示会调用onLoad，onReady，onShow方法) ; 如果是从下级返回到上级，下级将会被销毁。上级显示(初次显示会调用onLoad，onReady，onShow方法) ;
  • 隔代返回的话，会将中间所有的子级进行销毁。如 : 四级返回到一级或者跳转到一级，中间的四级，三级，二级都将被销毁，而一级会显示(初次显示会调用onLoad，onReady，onShow方法) ;

             好啦今天就到这里了，希望能帮到你哦！！！

文章标签：
小程序
前端开发
开发者
关键词：
微信小程序框架
微信框架
君临沂
目录
相关文章
CamilleKing
|
26天前
|
开发框架 人工智能 小程序
小程序常见的 UI 框架
【10月更文挑战第17天】小程序 UI 框架为开发者提供了便捷的工具和资源，帮助他们快速构建高质量的小程序界面。在选择框架时，需要综合考虑各种因素，以找到最适合项目的解决方案。随着技术的不断进步，UI 框架也将不断发展和创新，为小程序开发带来更多的便利和可能性。
CamilleKing
47 2
dufadayang
|
2月前
|
小程序 JavaScript 前端开发
小程序常见的UI框架
小程序常见的UI框架
dufadayang
300 60
yuanzhengme
|
3月前
|
移动开发 小程序 JavaScript
开源的微信小程序框架
【8月更文挑战第22天】开源的微信小程序框架
yuanzhengme
191 65
肥晨
|
5月前
|
小程序 前端开发 JavaScript
微信小程序MINA框架
【6月更文挑战第4天】微信小程序MINA框架是一个专为小程序设计的框架，它主要分为两大部分：页面视图层（View）和AppService应用逻辑层。下面我将结合代码和图示来详细讲解MINA框架。
肥晨
61 0
广州爱奇迪-伍华聪
|
4月前
|
移动开发 开发框架 前端开发
微信门户开发框架-使用指导说明书(2)--基于框架的开发过程
微信门户开发框架-使用指导说明书(2)--基于框架的开发过程
广州爱奇迪-伍华聪
72 3
广州爱奇迪-伍华聪
|
4月前
|
存储 开发框架 小程序
微信门户开发框架-使用指导说明书
微信门户开发框架-使用指导说明书
广州爱奇迪-伍华聪
42 3
广州爱奇迪-伍华聪
|
4月前
|
开发框架 前端开发 JavaScript
在微信框架模块中，基于Vue&Element前端的事件和内容的管理
在微信框架模块中，基于Vue&Element前端的事件和内容的管理
广州爱奇迪-伍华聪
54 1
广州爱奇迪-伍华聪
|
4月前
|
开发框架 移动开发 前端开发
在微信框架模块中，基于Vue&Element前端的后台管理功能介绍
在微信框架模块中，基于Vue&Element前端的后台管理功能介绍
广州爱奇迪-伍华聪
70 1
广州爱奇迪-伍华聪
|
4月前
|
开发框架 前端开发 JavaScript
在微信框架模块中，基于Vue&Element前端，通过动态构建投票选项，实现单选、复选的投票操作
在微信框架模块中，基于Vue&Element前端，通过动态构建投票选项，实现单选、复选的投票操作
广州爱奇迪-伍华聪
22 0
向宇it
|
5月前
|
小程序 开发者 Windows
轻量、可靠的小程序 UI 框架 -- Vant Weapp的安装和使用
轻量、可靠的小程序 UI 框架 -- Vant Weapp的安装和使用
向宇it
147 1

热门文章

最新文章

  • 1
    微信 6.5.1 for iOS发布 可以在朋友圈分享相册中的视频
  • 2
    iOS版微信新技能：可直接向PC端传文件
  • 3
    微信查询高考分数已支持20个城市
  • 4
    微信支付文章综合
  • 5
    微信公众平台可通过UnionID机制在多公众号间帐号互通
  • 6
    C# 企业微信消息推送对接
  • 7
    微信小视频微信卡包功能如约现身6.0版本
  • 8
    微信公众平台开发(102) 模板消息
  • 9
    微信消息回复C#
  • 10
    企业微信api接口调用-触发推送企业微信微信好友
  • 1
    基于微信小程序餐厅点餐系统设计与实现(源码+lw+部署文档+讲解等)
    233
  • 2
    基于微信小程序便捷记账系统设计与实现(源码+lw+部署文档+讲解等)
    132
  • 3
    基于SpringBoot+Vue的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
    78
  • 4
    基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
    63
  • 5
    基于SpringBoot+Vue的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
    92
  • 6
    基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
    82
  • 7
    基于SpringBoot+Vue+uniapp的传统戏曲推广微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
    57
  • 8
    基于SpringBoot+Vue+uniapp的仓库点单小程序的详细设计和实现(源码+lw+部署文档+讲解等)
    71
  • 9
    基于SpringBoot+Vue+uniapp的“鼻护灵”微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
    43
  • 10
    基于SpringBoot+Vue+uniapp的“财来财往”微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
    44

    • 相关课程

    更多
  • IoT小程序框架课程
  • 前端开发框架Bootstrap使用教程
  • C++ 入门教程开发文档
  • React 入门教程开发文档
  • 零基础学前端HTML+CSS
  • 移动Web前端开发

    • 相关电子书

    更多
  • 微信移动客户端-数据存储优化实践
  • 微信广告引擎与播放节奏算法实践
  • 微信H5视频播放器在海量业务下的实践

    • 相关实验场景

    更多
  • 搭建微信小程序（AMD 8代）
  • 搭建微信小程序
  • 1分钟SAE部署PHP商城小程序
  • 阿里云IoT小程序应用开发和组件实践
  • 搭建IoT小程序开发环境，创建一个应用
  • EMAS Serverless搭建《私人云相册》小程序
    • 下一篇
    无影云桌面