WeChat Development Mini Program

Mini program development tool win10 download address

Official document address


I learned about small programs... Although small programs are used less at present, I. But there are still small programs for buying tickets when you go home.
It's not difficult to develop small programs, just three-piece html, css and js will do. If you know vue, it will be faster. It is a set of front-end projects, and the code is downloaded and run on WeChat. Some tags replace html tags, and after compilation, they become web elements. The data only needs to call the interface, and the applet will render automatically.

1. Project structure description

Editor

debugging
Insert picture description here
page writing

demo

Right click on the folder and add page

<!--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
    })
  }
})


Guess you like

Origin blog.csdn.net/qq_44783283/article/details/110186490