小程序 简易教程

https://mp.weixin.qq.com/debug/wxadoc/dev/

稍微写点好了，本来是打算直接写到项目里面的，但是.json的配置文件里面好像不可以添加注释，所以 哎 无奈。

前面的废话不说了，看代码构成 。 微信还是以前端的MVVM模式来做的。 传统的HTML 是HTML+CSS+JS ，微信类似于这种，为WXML+WXSS+JS 一一对应咯。

WXML为页面结构，WXSS为页面样式 JS为页面逻辑。

JSON配置：

1.app.json 小程序配置 即全局配置 ，所谓配置 一般就是配置界面样式（window）顶部标题 颜色 等 ，还有项目文件路径（pages）。
2.project.config.json 这个也是配置，但是是工具配置，跟当前的IDE开发工具有关，目的是即使换电脑了，拷贝这个文件过去覆盖也可以轻松完成工具配置。跟项目无关。
3.page.json 页面配置 针对单独页面做的配置了。比如初始化项目后出现的log.json ,可以在上面定义一些页面单独的属性，比如是否可以下拉刷新 ，页面标题什么的。

WXML模板：

//pages/index/index.wxml 
//相对于前端 很多标签不一样了，其实也就是小程序对这些标签做了一定的封装，特别是地图 音频 视频等等 ，可以直接找到指定的标签放进去就可以了。
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
    <block wx:else>
      <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

2.多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式. {{}}是用js里面的参数。通过 {{ }} 的语法把一个变量绑定到界面上，我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。

WXSS 样式：

1.小程序增加了一个尺寸类型 rpx，避免换算的问题。
提供全局样式 跟局部样式，比如app.wxss 就是全局样式。log.wxss 就是局部样式。

JS交互逻辑：

比如一些点击事件 用户反馈之类的，都是在js里面写的。
<button bindtap="clickMe">点击我</button>
bindtap就是绑定事件，然后在js里面写好这个方法就可以了。
小程序提供了非常多的api，例如获取用户信息、本地存储、微信支付等。

tip：

1.微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。然后加载渲染出app出来。

2.程序启动会有回调，相当于app的生命周期嘛：

App({
  onLaunch: function () {
    // 小程序启动之后 触发 可以玩点刺激的
  }
})

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

4.页面渲染完毕后 也是有回调的，在js文件里面写就行

Page({
  data: { // 参与页面渲染的数据
    logs: []
  },
  onLoad: function () {
    // 页面渲染后 执行
  }
})

Page 是一个页面构造器，这个构造器就生成了一个页面。在生成页面的时候，小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构，于是就得到了你看到的小程序的样子。

在渲染完界面之后，页面实例就会收到一个 onLoad 的回调，你可以在这个回调处理你的逻辑。

小程序 框架

全局配置 除了 pages 跟window属性，还有 tabBar,networkTimeout,debug等

小程序 框架

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/structure.html

一个页面由四个文件组成

文件类型    必需  作用
js          是      页面逻辑
wxml        是      页面结构
json        否      页面配置
wxss        否      页面样式表

配置

全局配置的属性

pages :指向页面文件的路径（每次创建貌似都要写一个）
window：页面顶部的属性 比如文字 颜色 能否下拉刷新 等
tabBar：设置底部tabbar，用list包裹 里面pagePath指向路径，text定义名字
networkTimeout:设置网络超时时间 
debug :是否开启debug模式，用来定位问题，默认关闭
functionalPages:是否开启页面插件功能。默认关闭 不知道啥用
subPackages: 分包功能 听起来有点像是插件化的功能
workers:worker代码放置的位置 ，为了处理多线程？
requiredBackgroundModes：需要在后台使用到的功能，比如项目中使用到了音乐播放的话，可以写到这里面去
其他的 就不写了 ，感觉没啥必要。

文档写的太清楚了 有点不大想写这个笔记了。

app.json跟局部配置.json文件有相同设定的时候，也是根据就近原则，用最近的。

逻辑

前端的逻辑都是写在.js文件上面，用javascript引擎。 逻辑层处理数据，发送数据给视图层，并且接收视图层的反馈。 开发者写的所有代码最终将会打包成一份 JavaScript 文件，并在小程序启动的时候运行，直到小程序销毁。这一行为类似 ServiceWorker，所以逻辑层也称之为 App Service。 在 JavaScript 的基础上，我们增加了一些功能，以方便小程序的开发：

增加 App 和 Page 方法，进行程序和页面的注册。 增加 getApp 和 getCurrentPages 方法，分别用来获取 App 实例和当前页面栈。 提供丰富的 API，如微信用户数据，扫一扫，支付等微信特有能力。 每个页面有独立的作用域，并提供模块化能力。 注意：小程序框架的逻辑层并非运行在浏览器中，因此 JavaScript 在 web 中一些能力都无法使用，如 window，document 等。

小程序 逻辑层

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/app.html

App（Object）

用来注册一个小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。
App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。
这个方法有点类似于application的onCreate方法。

里面参数涉及一系列的监听方法，小程序初始化启动，小程序前后台切换，甚至一些问题都可以展示出来。

关于小程序销毁，说是关闭并没有销毁小程序，而只是进入了后台，只有在资源不足的情况下，才会销毁，但是我发现部分手机 比如我自己的360N5，死也不销毁，卡的爆炸，需要手动去一键加速搞定他。

App({
  onLaunch: function(options) {
    // Do something initial when launch.
    //类似于application的onCreate,在options又能拿到一堆信息，比如进入的渠道（场景值） 等，
  },
  onShow: function(options) {
    // Do something when show.
    //类似于application的从后台转前台监听
  },
  onHide: function() {
    // Do something when hide.
        //类似于application的从前台转后台监听
  },
  onError: function(msg) {
    console.log(msg)
    //错误提醒，用于debug，应该要设置debug的属性才可以，错误信息，包含堆栈
  },
  globalData: 'I am global' //定义的全局变量
})

getApp()可以获取小程序实例 可以拿到里面定义的变量 ，比如上面的globalData ，当然在App方法里面 直接用this就能拿到实例。

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html

app.js里面可以做全局的监听 ，用的是App（）方法 页面也有自己的js文件，里面用的是Page()方法，监听的更加到位 ，相当于android里面的所有生命周期都有

//index.js
Page({
  data: {
    //数据 可以填多个 按照这个样式就行，要json格式
    text: "This is page data."
  },
  onLoad: function(options) {
    // Do some initialize when page load.
    //类似 activity onCreate()
  },
  onReady: function() {
    // Do something when page ready.
    //类似 activity onStart()，但是一个页面只会调用一次
  },
  onShow: function() {
    // Do something when page show.
    //类似activity onResume()
  },
  onHide: function() {
    // Do something when page hide.
    //类似activity onPause
  },
  onUnload: function() {
    // Do something when page close.
    //类似 activity onDestroy()
  },
  onPullDownRefresh: function() {
    // Do something when pull down.
    //下拉刷新监听
  },
  onReachBottom: function() {
    // Do something when page reach bottom.
    //上拉加载监听
  },
  onShareAppMessage: function () {
    // return custom share data when user share.
    //右上角分享监听 
    //注意：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮
  },
  onPageScroll: function() {
    // Do something when page scroll
    //滚动监听
  },
  onTabItemTap(item) {
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
    //当前是tab页的话 点击tab监听
  },
  // Event handler.自定义方法处理事件
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  customData: {
    hi: 'MINA'//开发者可以添加任意的函数或数据到 Object 参数中，在页面的函数中用 this 可以访问
  }
})

稍微需要注意一点的是 Object 内容在页面加载时会进行一次深拷贝，需考虑数据大小对页面加载的开销。并且必须是json格式的。

Page.prototype.setData(Object data, Function callback)

setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。

以为小程序是跟Vue一样，改变值就可以直接同步到视图层的，现在看来不是这样的，需要调用setData才可以将视图层绑定的数据修改，这样才能作用到视图层，不然直接修改是没有作用的 而且会有数据不一致的风险。 当然，如果你数据本身就只是一个参数，比如说page，跟视图层不绑定的，那就直接改呗。

以上所写更类似于笔记，毕竟官方文档太清晰的。