02、小程序开发

一、小程序目录结构

文件类型

• .json为配置文件
• .wxml 为模板文件，相当于HTML模板
• .wxss 为样式文件，相当于HTML的CSS样式表
• .js 为JS 脚本逻辑文件，相当于HTML的js脚本

总结构

• app：一个，描述整体程序的；
• page：多个，描述各自页面的；
• project.config.json：一个，项目IDE配置文件；
• utils：一个，共用程序逻辑库；

具体说明

1、一个小程序主体部分(名称为app)，由三个文件组成，必须放在项目的根目录；

文件	必填	作用
app.js	是	小程序逻辑
app.json	是	小程序公共配置
app.wxss	否	小程序公共样式表

 

2、多个描述各自页面的 pages(pages目录存储小程序的每个页面)；

文件	必填	作用
页面名称.js	是	本页面逻辑
页面名称.wxml	是	页面结构
页面名称.json	否	页面配置
页面名称.wxss	否	页面样式表

注意:

• 为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名;
• 页面的配置，会覆盖小程序的公共配置；

 

3、根目录下的project.config.json

• 项目配置文件，或称为项目IDE配置文件；
• 在“微信开发者工具”上做的任何配置都会写入到这个文件；
• 如界面颜色、编译配置等，更换电脑，开发工具不需要重新配置；

 

4、一个共用程序逻辑库(util目录)

• 这个目录可以自定义名称；
• 公共的js函数文件，通过module.exports的方式，暴露pages下的每个页面使用；
• 不需要每个页面编写重复的Js代码；

module.exports={} 暴露给页面使用：

 

5、总结构图

新建的项目结构图：

 

二、文件说明

1、app.js文件

作用：一个描述整体程序的，调用了App()函数，注册一个小程序，参数为一个{}对象；

App()函数：用来注册一个小程序，接受一个 object 参数，其指定小程序的生命周期函数等；

 

说明：

1）注册小程序

每个小程序都需要在 app.js 中，调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。

// app.js
App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

 

2）整个小程序只有一个 App 实例，是全部页面共享的。

开发者可以通过 getApp 方法获取到全局唯一的 App 实例，获取App上的数据或调用开发者注册在 App 上的函数。

// index.js
const appInstance = getApp()
console.log(appInstance.globalData) // I am global data

3）App(Object object)

注册小程序，接受一个 Object 参数，其指定小程序的生命周期回调等；

App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果

 

参数Object object

属性	类型	默认值	必填	说明	最低版本
onLaunch	function		否	生命周期回调——监听小程序初始化。
onShow	function		否	生命周期回调——监听小程序启动或切前台。
onHide	function		否	生命周期回调——监听小程序切后台。
onError	function		否	错误监听函数。
onPageNotFound	function		否	页面不存在监听函数。	1.9.90
onUnhandledRejection	function		否	未处理的 Promise 拒绝事件监听函数。	2.10.0
其他	any		否	开发者可以添加任意的函数或数据变量到 Object 参数中，用 this 可以访问

 

onLaunch(Object object)

小程序初始化完成时触发，全局只触发一次。参数也可以使用 wx.getLaunchOptionsSync 获取。

参数：与 wx.getLaunchOptionsSync 一致

 

onShow(Object object)

小程序启动，或从后台进入前台显示时触发。也可以使用 wx.onAppShow 绑定监听。

参数：与 wx.onAppShow 一致

 

onHide()

小程序从前台进入后台时触发。也可以使用 wx.onAppHide 绑定监听。

 

onError(String error)

小程序发生脚本错误或 API 调用报错时触发。也可以使用 wx.onError 绑定监听。

参数：与 wx.onError 一致

 

onPageNotFound(Object object)

• 基础库 1.9.90 开始支持，低版本需做兼容处理。

小程序要打开的页面不存在时触发。也可以使用 wx.onPageNotFound 绑定监听。注意事项请参考 wx.onPageNotFound。

参数：与 wx.onPageNotFound 一致

示例代码：

App({
  onPageNotFound(res) {
    wx.redirectTo({
      url: 'pages/...'
    }) // 如果是 tabbar 页面，请使用 wx.switchTab
  }
})

 

onUnhandledRejection(Object object)

• 基础库 2.10.0 开始支持，低版本需做兼容处理。

小程序有未处理的 Promise 拒绝时触发。也可以使用 wx.onUnhandledRejection 绑定监听。注意事项请参考 wx.onUnhandledRejection。

参数：与 wx.onUnhandledRejection 一致

 

4）App的Object 参数--类型any

开发者可以添加任意的函数，或数据到 Object 参数中，用 this 可以访问相当于ApplicationContext，在整个小程序上下文中都以使用，即服务整个小程序scope；

 

app.js程序主体逻辑层，使用this访问；

例：App中，自定义函数和数据变量，在onShow函数中被调用；

//app.js
App({
  onShow:function(){
    this.myConsoleLog("app内onShow调用自定义函数myConsoleLog")
    this.myConsoleLog("app内打印自定义数据变量："+ this.myminiProgramName)
  },
  myConsoleLog:function(msg){
    console.log(msg)
  },
  myminiProgramName:"Nikey的小程序"
})

运行结果：

 

在页面.js逻辑层，使用getApp().属性名称访问；

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    name:''
  },
  onShow:function(){
    app.myConsoleLog("index page页面调用")
    this.setData({
      name:app.myminiProgramName
    })
  }
})

 

其他例子：

注意：

• App() 必须在 app.js 中注册，且不能注册多个；
• 不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就可以拿到 app 实例；
• 不要在 onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成；
• 通过 getApp() 获取实例之后，不要私自调用生命周期函数；

 

2、页面.js文件，逻辑层访问

//index.js
//获取应用实例
const app = getApp()

1）页面.js逻辑层访问；

 

2）app.js的App({自定义Any属性})  ，页面.js逻辑层访问，以及视图使用；

 

   

 

3、app.json文件，配置小程序项目

作用：对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

所有的选项配置：pages、window、tabBar、networkTimeout、debug

 

app.json 配置项列表

属性	类型	必填	描述
pages	String Array	是	设置页面路径
window	Object	否	设置默认页面的窗口表现
tabBar	Object	否	设置底部 tab 的表现
networkTimeout	Object	否	设置网络超时时间
debug	Boolean	否	设置是否开启 debug 模式

 

 

 

 

 

1）pages属性说明：

• 类型是String Array(字符串数组)， 每一项都是字符串，来指定小程序由哪些页面组成；
• 每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面；
• 小程序中新增/减少页面，都需要对 pages 数组进行修改；
• 文件名不需要后缀，框架自动匹配pages 数组路径下 .json, .js, .wxml, .wxss 4文件进行整合；
• pages字符串数组的第一个字符串页面路径【路径+文件名】为小程序显示的首页；

 

app.json

 

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

 

 

 

 

 

4、页面的js逻辑层(注册页面)