Inicialización del proyecto
primer paso
Cree un nuevo proyecto de programa pequeño desarrollado en la nube:
elimine todo lo que no necesita:
borre index.wxss, index.wxml, index.js, app.wxss e inicialice index.js:
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
Cambie app.json a esto:
{
"pages": [
"pages/index/index"
],
"window": {
"backgroundColor": "#F6F6F6",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#F6F6F6",
"navigationBarTitleText": "云开发 QuickStart",
"navigationBarTextStyle": "black"
},
"sitemapLocation": "sitemap.json",
"style": "v2"
}
Segundo paso
Abra el sitio web oficial https://vant-contrib.gitee.io/vant-weapp/#/intro :
Haga clic para comenzar rápidamente y siga los pasos en él:
Abra la línea de comando de la computadora y asegúrese de que Node.js esté instalado en su computadora:
luego haga clic con el botón derecho en la carpeta Proyecto, haga clic en [abrir en la terminal]:
ingrese primero:
luego ingrese:
haga clic en la esquina superior derecha [detalles] -> [configuración local] -> marque [Usar módulo npm]:
finalmente haga clic [herramientas] -> [build npm]:
el cuadro emergente a continuación muestra que el proyecto está establecido:
Uso de componentes
La escritura en el documento es muy detallada, siempre que lo mire, básicamente puede completarlo. Tomemos un ejemplo del uso de tipos complejos de componentes:
Al menú desplegable , por ejemplo:
Modificar app.json:
escribir index.wxml:
escribir enlace de eventos en 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 () {
}
})
Los resultados son los siguientes: la
operación básica es así, adiós