阅读 98

小程序成长之路(一)-- 第一个完整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...

关注下面的标签,发现更多相似文章
评论