项目初始化
第一步
新建一个云开发的小程序项目:
把不需要的东西都删掉:
将 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 () {
}
})
运行结果如下:
基本操作就是这样啦,掰掰