プロジェクトの初期化
最初の一歩
クラウドで開発された新しい小さなプログラムプロジェクトを作成します。
不要なものをすべて削除します
。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モジュールを使用]をチェックし
ます：最後にクリックします[tools]-> [build 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 () {
}
})
結果は次のとおりです。
基本的な操作は次のようになります、さようなら