微信小程序：模板语法

模板语法

微信小程序有自己单独的一套模板语法。

1. WXML 结构

   WXML 数据写法和Vue相似，数据通过 { {}} 包裹。

   <text>{
       { msg }}</text>
   

2. WXSS 样式

   WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。

   • rpx 单位

     rpx 将屏幕等分为 750 份，屏幕总宽度相当于 750rpx ，可以自适应不同屏幕。

     例：在 iphone6/7/8 上，屏幕宽度为375px，相当于750个物理像素。

     .box {
            
         width: 200rpx;
         height: 200rpx;
     }
     

   • 样式导入

     @import 用于样式导入。

     @import "./css/common/test.wxss"
     

3. Js 逻辑交互

   <text>{
       { msg }}</text>
   <button bindtap="changeMsg">点击</button>
   

   Page({
        
       // 页面初始数据
       data: {
        
           msg: '你好'
       },
       // 点击改变msg
       changeMsg () {
        
           this.setData({
        
               msg: "Hello World"
           })
       }
   })
   

动态绑定属性

• 数据绑定

  <img> 的 src 属性和 vue 不同，地址写法为 src="{ { 图片地址 }}" 。

  <view>
  	<text>{
      { title }}</text>
      <img src="{
        { imgURL }}"></img>
  </view>
  

• 数据定义在 .js 文件中的 data 内。

  Page({
       
      // 数据
      data: {
       
          titie: "标题",
          imgURL: "../images/1.jpg"
      }
  })
  

小程序宿主环境

宿主环境是指 微信客户端给小程序所提供的环境 。

通信模型

运行环境分为渲染层和逻辑层，WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。

运行机制

1. 微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。

2. 通过 app.json 的 pages 字段获取当前小程序的所有页面路径。

   pages 中的一个行就是首页。

   {
        
       "pages":[
           "pages/index/index",
           "pages/logs/logs"
       ]
   }
   

3. 小程序启动后，执行 app.js 定义的 App 实例的 onLaunch 回调。

   App({
        
       onLaunch: function () {
        
           // 小程序启动之后 触发
       }
   })
   

4. 微信客户端先根据 pages/logs/logs.json 配置生成一个页面，接着装载这个页面的 WXML 结构 和 WXSS 样式，最后装载 log.js 。

   /** pages/logs/logs.js **/
   Page({
        
       data: {
         // 参与页面渲染的数据
           logs: []
       },
       onLoad: function () {
        
           // 页面渲染后 执行
       }
   })
   

5. Page 是一个页面构造器，会生成一个页面，在生成页面的同时，