Project initialization
first step
Create a new cloud-developed small program project:
delete all unnecessary things:
clear index.wxss, index.wxml, index.js, app.wxss, and initialize index.js:
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
Change app.json to this:
{
"pages": [
"pages/index/index"
],
"window": {
"backgroundColor": "#F6F6F6",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#F6F6F6",
"navigationBarTitleText": "云开发 QuickStart",
"navigationBarTextStyle": "black"
},
"sitemapLocation": "sitemap.json",
"style": "v2"
}
Second step
Open the official website https://vant-contrib.gitee.io/vant-weapp/#/intro :
Click to get started quickly and follow the steps in it:
Open the computer command line and make sure that Node.js is installed on your computer:
then right-click Project folder, click [open in terminal]:
input first:
then input:
click on the upper right corner [details] -> [local settings] -> check [Use npm module]:
finally click [tools] -> [build npm ]: The
pop-up box below shows that the project is established:
Use of components
The writing in the document is very detailed, as long as you look at the document, you can basically complete it. Let's take an example of the use of complex types of components:
To the drop-down menu , for example:
Modify app.json:
write index.wxml:
write event binding in index.js:
Page({
/**
* 页面的初始数据
*/
data: {
show: false,
actions: [
{
name: '选项1',
},
{
name: '选项2',
},
{
name: '选项3',
subname: '副文本',
openType: 'share',
},
],
value:""
},
onTap() {
this.setData ({
show: true
})
},
onClose() {
this.setData ({
show: false
})
},
onSelect(res) {
this.setData ({
value: res.detail.name
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
The results are as follows: the
basic operation is like this, bye