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

微信小程序之框架

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

一.视图层

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方法) ;

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

文章标签：
小程序
前端开发
开发者
关键词：
微信小程序框架
微信框架
君临沂
目录
相关文章
童小纯
|
3月前
|
JSON 小程序 前端开发
微信小程序框架(五)-全面详解（学习总结---从入门到深化）
微信小程序框架(五)-全面详解（学习总结---从入门到深化）
童小纯
52 0
童小纯
|
3月前
|
存储 缓存 JSON
微信小程序框架(四)-全面详解（学习总结---从入门到深化）
微信小程序框架(四)-全面详解（学习总结---从入门到深化）
童小纯
152 0
龙大吉
|
7天前
|
开发框架 移动开发 小程序
小程序开发框架
- WePY(1.4K+ stars): 腾讯的Vue风格组件化框架 - MpVue(1.3K+ stars): 美团的Vue支持框架 - Taro(京东出品): React规范，多端开发，包括H5和RN - Tina.js: 渐进式框架，兼容MINA API，适合新手 各框架特色各异，适用于不同技能和项目需求。
龙大吉
23 0
daotianmi
|
2月前
|
小程序 JavaScript
在使用微信小程序开发中用vant2框架中的Uploader 文件上传wx.uploadFile无反应和使用多图上传
网上有的说是bind:after-read="afterRead"的命名问题不支持-，但是我这儿执行了console.log("file",file);证明函数运行了。后来发现是multiple="true"原因开启了多图上传，如果是多图上传的话file就是数组了
daotianmi
63 2
肥晨
|
2月前
|
小程序 前端开发 JavaScript
微信小程序MINA框架
微信小程序MINA框架
肥晨
94 0
童小纯
|
3月前
|
小程序 JavaScript 前端开发
微信小程序框架(二)-全面详解（学习总结---从入门到深化）
微信小程序框架(二)-全面详解（学习总结---从入门到深化）
童小纯
95 0
童小纯
|
3月前
|
JSON 小程序 前端开发
微信小程序框架(一)-全面详解（学习总结---从入门到深化）
微信小程序框架(一)-全面详解（学习总结---从入门到深化）
童小纯
137 0
答神~
|
4月前
|
开发框架 小程序 前端开发
【第57期】一文读懂小程序开发框架Taro
【第57期】一文读懂小程序开发框架Taro
答神~
44 1
八百标兵奔北坡
|
21天前
|
存储 编解码 小程序
抖音小程序开发中遇见的坑点
在抖音小程序开发中，需注意10大坑点：遵守小程序限制与规范；解决兼容性问题；优化数据加载速度；适应分享功能限制；处理视频播放挑战；优化图片加载显示；管理资源文件；提升用户体验；考虑安全性；及时更新维护。通过测试、优化和遵循官方文档，可克服这些问题，打造优质小程序。
八百标兵奔北坡
32 5
桃李春风一杯酒
|
1月前
|
小程序 前端开发 API
小程序全栈开发中的多端适配与响应式布局
【4月更文挑战第12天】本文探讨了小程序全栈开发中的多端适配与响应式布局。多端适配涉及平台和设备适应，确保统一用户体验；响应式布局利用媒体查询和弹性布局维持不同设备的布局一致性。实践中，开发者可借助跨平台框架实现多平台开发，运用响应式布局技术适应不同设备。同时，注意兼容性、性能优化和用户体验，以提升小程序质量和用户体验。通过这些方法，开发者能更好地掌握小程序全栈开发。
桃李春风一杯酒
45 0

热门文章

最新文章

  • 1
    python爬虫之app爬取-微信朋友圈
  • 2
    Python爬虫-使用代理获取微信公众号文章
  • 3
    【微信小程序】-- 分包 - 独立分包 & 分包预下载（四十五）
  • 4
    【微信小程序】-- 自定义组件总结 （四十）
  • 5
    【微信小程序】-- 分包（四十四）
  • 6
    【微信小程序】TypeError: Cannot read property ‘get‘ of undefined & Error: MiniProgramError
  • 7
    【微信小程序】-- 使用 npm 包 - Vant Weapp（四十一）
  • 8
    【微信小程序】-- 表单组件 - picker 实现日期选择器（五十三）
  • 9
    【微信小程序】-- 案例 - 自定义 tabBar（四十六）
  • 10
    【微信小程序】-- 全局配置 -- window - 下拉刷新 & 上拉触底（十六）
  • 1
    【Linux】Linux第一个小程序－进度条
    40
  • 2
    『Linux升级路』进度条小程序
    21
  • 3
    【微信小程序】-- 表单组件 - picker 实现日期选择器（五十三）
    86
  • 4
    【微信小程序】TypeError: Cannot read property ‘get‘ of undefined & Error: MiniProgramError
    104
  • 5
    【微信小程序】-- uni-app 项目-- 购物车 -- 首页 - 轮播图效果（五十二）
    52
  • 6
    【微信小程序】-- uni-app 项目--- 购物车 -- 配置 tabBar 效果（五十一）
    53
  • 7
    【微信小程序】-- 使用 Git 管理项目（五十）
    49
  • 8
    【微信小程序】-- uni-app 项目创建 & 目录结构讲解（四十九）
    68
  • 9
    【微信小程序】-- 配置uni-app的开发环境（四十八）
    41
  • 10
    【微信小程序】-- npm包总结 --- 基础篇完结（四十七）
    42

    • 相关课程

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

    • 相关电子书

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

    • 相关实验场景

    更多
  • 1分钟SAE部署PHP商城小程序
  • 搭建微信小程序
  • 阿里云IoT小程序应用开发和组件实践
  • 搭建IoT小程序开发环境，创建一个应用
  • EMAS Serverless搭建《私人云相册》小程序
  • 基于小程序Serverless开发个人相册小程序
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）