点这里,搜索淘宝优惠券!
点这里,搜索淘宝优惠券!

2 官方文档整理-逻辑层-JS脚本

【场景值】:表示在什么情况下使用小程序,可以在 ApponLaunchonShow 中获取上述场景值,部分场景值下还可以获取来源应用、公众号或小程序的appId。详见

【运行机制】

  • 当小程序进入后台,客户端会维持一段时间的运行状态,超过一定时间后(目前是5分钟)会被微信主动销毁
  • 当短时间内(5s)连续收到两次以上收到系统内存告警,会进行小程序的销毁

【APP】----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

【函数】:由小程序框架调用,参数指定小程序中会用到的 初始数据生命周期回调事件处理函数等

     函数的参数结构为JSON字符串,详细可查看 W3C School JSON教程:  http://www.w3school.com.cn/json/

【注册程序】:系统调用App()函数注册应用程序,传入事件处理函数

【APP事件列表】

onLaunch Function 生命周期回调—监听小程序初始化 小程序初始化完成时(全局只触发一次)
onShow Function 生命周期回调—监听小程序显示 小程序启动,或从后台进入前台显示时
onHide Function 生命周期回调—监听小程序隐藏 小程序从前台进入后台时
onError Function 错误监听函数 小程序发生脚本错误,或者 api 调用失败时触发,会带上错误信息
onPageNotFound Function 页面不存在监听函数 小程序要打开的页面不存在时触发,会带上页面信息回调该函数

 

【页面】----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

  【注册页面】Page(Object) 函数用来注册一个页面。接受一个 Object 类型参数,其指定页面的 初始数据生命周期回调事件处理函数等

  页面 WXML文件如下

1 <view>{{text}}</view>
2 <view>{{array[0].msg}}</view>

  初始数据: text是一个字符串,array 是一个数组,数组元素是一个字典,

       Page()函数会将data中的数据传送到页面,替换页面对应位置的值:{{text}} 替换为 ‘init data’ ,{{array[0].msg}} 替换为 ‘1’

1 Page({
2   data: {
3     text: 'init data',
4     array: [{msg: '1'}, {msg: '2'}]
5   }
6 })

  生命周期回调函数:onLoad(Object query) 、onShow()、onReady()、onHide()、onUnload()

  事件处理函数:

  【监听页面 用户下拉刷新事件onPullDownRefresh():

  • 开启下拉刷新监听需要在app.jsonwindow选项中或页面配置中开启enablePullDownRefresh
  • 手动触发刷新:可以通过wx.startPullDownRefresh触发下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。
  • 停止刷新:当处理完数据刷新后wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

  【上拉触底事件】onReachBottom()

  • 设置出触发距离:可以在app.jsonwindow选项中或页面配置中设置触发距离onReachBottomDistance
  • 在触发距离内滑动期间,本事件只会被触发一次

  【分享/转发】onShareAppMessage(Object)。只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮,此事件需要 return 一个 Object,用于自定义转发内容,返回内容如下:

【组件事件绑定】:绑顶组件的对应事件处理函数  

【两个重要的函数】

  route:到页面的路径

  setData(Object data, Function callback):设置数据,并更新UI

【页面的生命周期】

【页面栈】:框架以栈的形式维护了当前的所有页面。当发生路由切换的时候详细情形参考网址:https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html

路由方式页面栈表现
初始化 新页面入栈
打开新页面 新页面入栈
页面重定向 当前页出栈,新页面入栈
页面返回 页面不断出栈,直到目标返回页
Tab 切换 页面全部出栈,只留下新的 Tab 页面
重加载 页面全部出栈,只留下新的页面

【页面切换】

【模块化】----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 【文件作用域】

  在 JavaScript 文件中声明的变量和函数只在该文件中有效;不同的文件中可以声明相同名字的变量和函数,不会互相影响。

  通过全局函数 getApp() 可以获取全局的应用实例,如果需要全局的数据可以在 App() 中设置

【模块化的实现】可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。

  注意: 

  • exportsmodule.exports 的一个引用,因此在模块里边随意更改 exports 的指向会造成未知的错误。所以更推荐开发者采用 module.exports 来暴露模块接口,除非你已经清晰知道这两者的关系。
  • 小程序目前不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中或者使用小程序支持的 npm 功能。

   例子:

  模块文件实现:

// common.js
// 定义对外接口函数
function sayHello(name) {
  console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
  console.log(`Goodbye ${name} !`)
}

//导出接口
module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye

  使用写好的模块文件:

//导入模块
var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('MINA') //使用模块中的函数
  },
  goodbyeMINA: function() {
    common.sayGoodbye('MINA')
  }
})

 

 

   

posted @ 2018-09-12 15:07  chd_ailex  阅读(254)  评论(0)    收藏  举报