微信小程序开发技术文档

遇見幸福的蘇蘇 發表於 2021-1-21 15:18:00

<h3 align="center">数字化终端小程序开发文档</h3>
一．目录结构
1. 小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：
 <img src="https://img2020.cnblogs.com/blog/2022968/202101/2022968-20210121152953246-1481092889.png">
 
 
2. 一个小程序页面由四个文件组成，分别是：
 <img src="https://img2020.cnblogs.com/blog/2022968/202101/2022968-20210121153020059-1440356248.png">
 
 
*注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。
 
二．配置小程序
<ol>
<li>app.json小程序全局配置文件</li>
</ol>
{
  "pages":[//用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
    "pages/index/index",
    ...
  ],
  "window":{//定义小程序所有页面的顶部背景颜色，文字颜色定义等
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#388bff",
    "navigationBarTitleText": "数字化终端",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh": true,
    "onReachBottomDistance": 50
}
<ol>
<li>页面配置</li>
</ol>
每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。
例如：
{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "页面标题名称",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"}
三．小程序框架
 
<ol>
<li>注册页面</li>
</ol>
对于小程序中的每个页面，都需要在页面对应的 js 文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等。
//index.jsPage({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 页面创建时执行
  },
  onShow: function() {
    // 页面出现在前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  },
  onPullDownRefresh: function() {
    // 触发下拉刷新时执行
  },
  onReachBottom: function() {
    // 页面触底时执行
  },
  onShareAppMessage: function () {
    // 页面被用户分享时执行
  },
  onPageScroll: function() {
    // 页面滚动时执行
  },
  onResize: function() {
    // 页面尺寸变化时执行
  },
  onTabItemTap(item) {
    // tab 点击时执行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // 事件响应函数
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  // 自由数据
  customData: {
    hi: 'MINA'
  }})
 
<ol>
<li>页面生命周期</li>
</ol>
 
 
 <img src="https://img2020.cnblogs.com/blog/2022968/202101/2022968-20210121153107387-1189439081.png">
 
<img src="https://img2020.cnblogs.com/blog/2022968/202101/2022968-20210121153123330-24647401.png">
 
 
 
 
<ol>
<li>数据的绑定</li>
</ol>
WXML 中的动态数据均来自对应 Page 的 data。
<h3>简单绑定</h3>
数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：
<h3>内容</h3>
<view> {{ message }} </view>
Page({
  data: {
    message: 'Hello MINA!'
  }})
<h3>组件属性(需要在双引号之内)</h3>
<view id="item-{{id}}"> </view>
Page({
  data: {
    id: 0
  }})
<h3>控制属性(需要在双引号之内)</h3>
<view wx:if="{{condition}}"> </view>
Page({
  data: {
    condition: true
  }})
<ol>
<li>网络发起发起 HTTPS 网络请求请求</li>
</ol>
wx.request({
url: app.globalData.ip + '/Ashx/CheckAssetHandler.ashx?cmd=3&checkid='+this.data.pddid+'&userid='+user.SYSCODE, 
      header: {
        'content-type': 'application/json'
      },
      success (res) {
        wx.hideLoading()
        if(res.data.code==0){
          _this.setData({
          details:res.data.data
          })
        } else {
          wx.showToast({
            title: res.data.message,
            icon: 'none',
            duration:3000
          })
        }
      },
      fail: function(e) { //网络请求错误
        wx.showToast({
          title: '网络请求错误',
          icon: 'none'
        })
      }
    })
 

</div>
<div id="MySignature" role="contentinfo">
本文来自博客园，作者：zwbsoft，转载请注明原文链接：https://www.cnblogs.com/zwbsoft/p/14308192.html
电话微信：13514280351 
来源：https://www.cnblogs.com/zwbsoft/p/14308192.html

頁: [1]

琼殿技术论坛's Archiver

微信小程序开发技术文档