微信小程序入门开发

来源:互联网 发布:先导爱知 编辑:程序博客网 时间:2024/05/22 23:43

微信小程序开发的话,最好是使用微信调试工具进行学习。因为使用微信调试工具的话可以模拟微信上的页面表示,可以非常方便的在电脑上进行开发和调试。

前:

后:


代码如下:

js:

Page({  data: {    text: 'init data',    num: 0,    array: [{ text: 'init data' }],    object: {      text: 'init data'    }  },  changeText: function () {    // this.data.text = 'changed data'  // bad, it can not work    this.setData({      text: 'changed data'    })  },  changeNum: function () {    this.data.num = 1    this.setData({      num: this.data.num    })  },  changeItemInArray: function () {    // you can use this way to modify a danamic data path    this.setData({      'array[0].text': 'changed data'    })  },  changeItemInObject: function () {    this.setData({      'object.text': 'changed data'    });  },  addNewField: function () {    this.setData({      'newField.text': 'new data'    })  }})

wxml:

<text class="t">组件</text><view>{{text}}</view><view>{{array[0].msg}}</view><view>{{text}}</view><button bindtap="changeText"> Change normal data </button><view>{{num}}</view><button bindtap="changeNum"> Change normal num </button><view>{{array[0].text}}</view><button bindtap="changeItemInArray"> Change Array data </button><view>{{object.text}}</view><button bindtap="changeItemInObject"> Change Object data </button><view>{{newField.text}}</view><button bindtap="addNewField"> Add new data </button>

图形的界面:



在小程序的刚开始学习的时候,其实程序会在根目录上出现app.js,app.json,app.wxss三个代码文件。这几个文件的话

其实是程序上比较重要的文件,用来注册一个app小程序的。之后的其它页面如果要获取用户等信息的话要获取app上

的信息。


原创粉丝点击