小程序开发：框架

微信开发

小程序，无非是盘版布局、掉借口

结构配置

pages:所有的页面

utils:放置工具类

app.js: 一些公共要用的代码

app.wxss:一些装饰元素

https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

微信的整体结构： app.json:

无图片版：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "dark",
    "enablePullDownRefresh": true,
    "backgroundColor": "#939393",
    "navigationBarBackgroundColor": "#939393",
    "navigationBarTitleText": "电影资讯",
    "navigationBarTextStyle": "red"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
    
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      
      }
    ],
    "backgroundColor": "#939393",
    "color": "#fff",
    "selectedColor": "#FF6655"
  }
}

有图片版：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"dark",
    "enablePullDownRefresh": true,
    "backgroundColor": "#939393",
    "navigationBarBackgroundColor": "#939393",
    "navigationBarTitleText": "电影资讯",
    "navigationBarTextStyle":"red"
  },
  "tabBar": {


    "list": [
        {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath":"icons/dy-1.png",
        "selectedIconPath":"icons/dy.png"
      },

      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "icons/search-1.png",
        "selectedIconPath": "icons/search.png"
      }
    
    ],
    "backgroundColor": "#939393",
    "color": "#fff",
    "selectedColor": "#FF6655"


  }
 

}

>

测试语句：console.log

绑定数据

home.js

// pages/home/home.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
      hello:"你好,威海"
  },

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

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

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

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

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

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

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

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

home.wxml:

<view>

{{hello}}
</view>

集合和循环

home.js:

// pages/home/home.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
      hello:"你好,威海",
      num:[11111,2,3,4,5,6,7,8,9,]
  },

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

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

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

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

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

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

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

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

home.wxml:

<view>

{{hello}}
</view>

<view wx:for='{{num}}' wx:for-index='i' wx:for-item='num1'>
  <view wx:if='{{num1%2==0}}'>
    {{num1}}是偶数
  </view>
  <view wx:else>
    {{num1}}是奇数
  </view>

</view>

返回 微信小程序应用开发