1.  <!-- 获取值 -->

data: {    message:"hi word",    flag:false}

 

2. <!--列表渲染-->

     
       
          
       
        {
   {index}}:{
   {item.name}}
         
      
     

data: {    items:[      { name: "商品A" },      { name: "商品B" },      { name: "商品C" },      { name: "商品D" },      { name: "商品E" }    ]}

3. <!--条件渲染-->

     
       
      
           条件1  
        
      
           条件2  
        
      
           条件3  
      
     

data: {    condition:Math.floor(Math.random()*3+1) } 为condition 赋值一个1--3 的整数，   Math.random()*3 获取0--3的浮点随机数，  Math.floor 浮点数变整数

4. <!--模板 import 引用-->  只引用 template 模板中的内容

       
      
       hello,word
      

5. <!--模板 include 引用-->   只引用 非 template 模板的内容

      
       hello,word view
      
      
      

6. css 引用

      
         hello word
      

/*hello.wxss*/ @import "./assets.wxss";.container{
      color: red;}

/*assets.wxss*/ .container{
      border:1px solid #000;}

7. 内联样式

      
       hello word2
      

/*hello.js*/ data: {    colorValue:"red"  },

8.  wxs 内部使用

      
         module.exports = {    message:'Hello, world!'  }
      
      
       {
    {m1.message}}
      

9. 引用外部 wxs 文件

      
      
      
       {
    {m2.message}}
      

      module.exports = require("./m1.wxs")

      module.exports = {  message:'hello world'}

 10. view 组件  参考微信小程序开发文档（微信官方网站）

      
        
       
        view 组件
           
               
                
            
       
      

.view-parent-container{
       width:300rpx;  height:300rpx;  background: yellowgreen;}.hover-parent-container{
       background: #fff;}.view-container{
         width:200rpx;    height:200rpx;    background: chocolate;    color:#fff;    text-align: center;    line-height: 200rpx;}.hover-container{
       background: red;}