项目初始化
第一步
新建一个云开发的小程序项目：
把不需要的东西都删掉：
将 index.wxss 、index.wxml 、index.js 、app.wxss 清空，初始化 index.js：
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
将 app.json 改成这样：
{
"pages": [
"pages/index/index"
],
"window": {
"backgroundColor": "#F6F6F6",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#F6F6F6",
"navigationBarTitleText": "云开发 QuickStart",
"navigationBarTextStyle": "black"
},
"sitemapLocation": "sitemap.json",
"style": "v2"
}
第二步
打开官网 https://vant-contrib.gitee.io/vant-weapp/#/intro：
点击快速上手，按照其中的步骤进行操作：
打开电脑命令行，确保自己电脑安装过 Node.js ：
然后右击项目文件夹，点击【在终端中打开】：
先输入：
再输入：
点击右上角【详情】-> 【本地设置】-> 勾选【使用 npm 模块】：
最后点击【工具】->【构建 npm】：
弹出下图这个框即证明该项目建立完毕：
组件的使用
文档中的写的很详细，只要看文档基本上都能完成， 我们来示例一下复杂类型的组件使用：
以下拉菜单为例：
将 app.json 修改：
写好 index.wxml：
在 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 () {
}
})
运行结果如下：
基本操作就是这样啦，掰掰