微信小程序开发系列二小程序开发基础

旧城等待， 2023-06-29 12:57 16阅读 0赞

# 一、基本目录结构 #

# 二、 小程序生命周期 #

//app.js
    App({
      onLaunch: function (){ // 小程序初始化完成时触发，全局只调用一次
      },
      onShow: function (options) { // 小程序启动或从后台进入前台显示时触发
      },
      onHide: function () { // 小程序从前台进入后台时触发
      },
      onError: function (msg) { // 小程序发生错误或者api调用失败时触发，并带上错误信息
      }
    })

app.js中定义的全局属性和全局方法在其他页面中可以通过 getApp() 获取，如：

var app = getApp()  
console.log(app.data)

# 三、网络调用 #

wx.request  发起网络请求
    wx.uploadFile 上传文件
    wx.downloadFile 下载文件
    wx.navigateTo  在新窗口打开页面，原页面不销毁，wx.navigateBack可返回
    wx.redirectTo  在原窗口打开页面

# 四、全局配置文件 app.json #

//app.json
    {
      "pages": [
        "pages/index/index"
      ],
      "window": {},
      "tabBar": {}, // 底部tab设置
      "networkTime": {} // 网络超时设置
    }

更多参数参见 https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

# 五、页面逻辑文件 #

//index.js
    Page({
      data: {
        name: 'mike',
        age: 20
      },
      onLoad: function() { // 页面加载
      },
      onReady: function() { // 初次渲染完成
      },
      onShow: function() { // 页面显示
      },
      onHide: function() { // 页面隐藏
      },
      onUnload: function() { // 页面卸载
      },
      onPulldownRefresh: function() { // 用户下拉
      },
      onReachButton: function() { // 上拉触底
      },
      myclick: function() { // 自定义函数或者数据, this可以访问
        console.log('clicked');
      },
      other: {} // 自定义函数或者数据, this可以访问
    })

页面窗口配置参见 [https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html][https_developers.weixin.qq.com_miniprogram_dev_reference_configuration_page.html]

[https_developers.weixin.qq.com_miniprogram_dev_reference_configuration_page.html]: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html