微信小程序 data对象赋值和取值

r囧r小猫 2022-11-28 13:50 380阅读 0赞

# 微信小程序 data对象赋值和取值 #

## 显示静态数据 ##

往data赋值

Page({ 
     data: { 
        motto: 'Hello World'
      }
    })

在\*\*\*.wxml这样子取data对象的属性

## 显示响应的动态数据 ##

在js中这样子写

function setData(){ 
        var _this= this;
        that.setData({ 
          message: '新消息'
        })
    }

我就举一个简单的例子用onShow去动态加载数据让页面显示响应的动态数据

onShow: function () { 
        var _this=this;
        console.log(_this.data.motto);
        wx.request({ 
          url: 'http://gx58s6.natappfree.cc/AppInfoSystem/dev/flatform/app/categorylevellist.json',
          data: { 
            pid: '1',
            categoryLevel: "categoryLevel1"
          },
          headers: { 
            'Content-Type': 'application/json'
          },
          success: function (res) { 
            if (res.data != '' && res != null) { 
              _this.setData({ 
                categorylevellist:res.data
              })
              console.log(_this.data.categorylevellist);
            }
          }
        })
      }

使用列表渲染 wx:for  
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。  
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

<view wx:for="{
       {categorylevellist}}">
      {
       {index}}: {
       {item.message}}
    </view>

其实你只要学会了看微信开发文档,其实开发一个微信小程序是很简单的啦  
话不多说直接上[微信官方文档][Link 1]

[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/