小程序成长之路（一）-- 第一个完整demo

开篇

因为公司项目中开始使用小程序开发，作为一个没有使用过的小白，赶紧学习啦。

1. 小程序运行环境：

* 在 iOS 上，小程序的 javascript 代码是运行在 JavaScriptCore 中，是由 WKWebView 来渲染的，环境有 iOS8、iOS9、iOS10。
* 在 Android 上，小程序的 javascript 代码是通过 X5 JSCore来解析，是由 X5 基于 Mobile Chrome 53/57 内核来渲染的。
* 在 开发工具上， 小程序的 javascript 代码是运行在 nwjs 中，是由 Chrome Webview 来渲染的。
复制代码

2. 如何开发小程序？

小程序不同于原生的html，不是简单的新建一个html文档，里面写个<div>hello world!!!</div>在浏览器打开就可以运行的文件，想要开发，需要下载小程序的开发工具:

所有工作开始前记得注册一个微信公众平台账号：

小程序的开发工具

注册小程序APPID

小程序开发文档

官方文档中对从注册到使用都有非常完整的介绍，这里就不再赘述。

3. 小程序架构？

1. 小程序分为视图层与逻辑层， 如上面第一点所说，视图层通过WebView运行，逻辑层通过JSCore运行。

2. 逻辑层和视图层如何通信呢？ 通过 WeixinJsBridage 进行通行。

3. 在实际的开发中，不管是Page也好，App也好，在data中定义好的数据会直接渲染到对应的页面上，但是这个时候我如果想在视图层直接对数据进行一些处理，该如何做呢？

   这里需要用到wxs

4. 小程序的目录结构？

├── pages
|   ├── index
|   |   ├── index.json  index 页面配置
|   |   ├── index.js    index 页面逻辑
|   |   ├── index.wxml  index 页面结构
|   |   └── index.wxss  index 页面样式表
|   └── log
|       ├── log.json    log 页面配置
|       ├── log.wxml    log 页面逻辑
|       ├── log.js      log 页面结构
|       └── log.wxss    log 页面样式表
├── app.js              小程序逻辑
├── app.json            小程序公共设置
└── app.wxss            小程序公共样式表
复制代码

了解了上述大概内容，算是对小程序有一个基本的认识，下面是自己写了一个Demo中想总结的地方（比较零碎，觉得要记就记了）：

概念上的一点问题：

• App ：小程序入口， Pages ：页面入口。

• rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

  设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
  iPhone5	1rpx = 0.42px	1px = 2.34rpx
  iPhone6	1rpx = 0.5px	1px = 2rpx
  iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

• wxml与wxss编译器：

  wxml编译器：wcc 把wxml文件 转为 js 执行方式：wcc index.wxml。
  wxss编译器：wcsc 把wxss文件转化为 js 执行方式： wcsc index.wxss。

实际开发上的记录：

• bindtap/catchtap: bindtap会有冒泡的问题，catchtap不会有这些问题。

• 设置data中的值：this.setData({}),这个和react还蛮像的，哈哈哈，很快就理解了。

• 缓存的操作： setStorageSync/setStorage,目前之使用过同步的方法，异步的比较难管理而且代码繁琐。

• App的生命周期：

  属性	描述	触发时机
  onLaunch	生命周期函数--监听小程序初始化	当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
  onShow	生命周期函数--监听小程序显示	当小程序启动，或从后台进入前台显示，会触发 onShow
  onHide	生命周期函数--监听小程序隐藏	当小程序从前台进入后台，会触发 onHide

• Page的生命周期：

  字段	说明
  onLoad	生命周期函数--监听页面加载
  onReady	生命周期函数--监听页面初次渲染完成
  onShow	生命周期函数--监听页面显示
  onHide	生命周期函数--监听页面隐藏
  onUnload	生命周期函数--监听页面卸载

• 在使用template中，图片的路径最好使用绝对路径而不是相对路径，因为，当组件的目录发生变化，会导致一些静态资源获取不到。

Demo

第一个Demo的项目github地址，刚开始只是为了熟悉大概小程序环境语法，所以没有调用接口，数据都是在post——data.js中写死。

简单的新闻阅读器

end...