WeChat開発ミニプログラム

ミニプログラム開発ツールwin10ダウンロードアドレス

公式文書アドレス


私は小さなプログラムについて学びました...小さなプログラムは現在あまり使用されていませんが、私は。しかし、家に帰ったときにチケットを購入するための小さなプログラムはまだあります。
小さなプログラムを開発することは難しくありません。スリーピースのhtml、css、jsだけで十分です。あなたがvueを知っているなら、それはより速くなるでしょう。これはフロントエンドプロジェクトのセットであり、コードはダウンロードされ、WeChatで実行されます。一部のタグはhtmlタグを置き換え、コンパイル後、それらはWeb要素になります。データはインターフェースを呼び出すだけでよく、アップルトは自動的にレンダリングされます。

1.プロジェクト構造の説明

エディター

デバッグ
ここに写真の説明を挿入
ページの書き込み

デモ

フォルダを右クリックしてページを追加

<!--pages/demo/demo02.wxml-->
<text>pages/demo/demo02.wxml</text>

<button bindtap="onSearch">加载数据</button>

<view wx:for="{
     
     {city}}">
  {
   
   {item}}
</view>


// pages/demo/demo02.js
Page({
    
    

  /**
   * 页面的初始数据
   */
  data: {
    
    
    city: []
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
    

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
    

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
    

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
    

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
    

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
    

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
    

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
    

  },
  // 点击搜索~
  onSearch: function() {
    
    

    let data_list = ['changsha', 'shanghai', 'wuhan', 'beiJing', 'banner'];

    this.setData({
    
    
      city: data_list
    })
  }
})


おすすめ

転載: blog.csdn.net/qq_44783283/article/details/110186490