微信小程序开发入门

微信小程序开发入门

本篇将为大家介绍小程序的开发语言,运行机制,更新机制,通信机制,以及从宏观上来把控小程序的项目框架,为开发小程序建立一个初步的认知.小程序提供的UI组件及工具API请大家移步文末微信公众平台官方文档在实践中进行下一步的学习.

开发基础

微信开发者工具

1. 运行环境
微信小程序运行在三端:iOS、Android 和 用于调试的开发者工具。

三端的脚本执行环境以及用于渲染非原生组件的环境是各不相同的:

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

2. 开发语言

  • WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。
  • WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。
  • WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。

3. 基础库

  • 基础库与客户端之间的关系
    小程序的能力需要微信客户端来支撑,每一个基础库都只能在对应的客户端版本上运行,高版本的基础库无法兼容低版本的微信客户端,故使用高版本基础库中的组件API需要进行兼容处理.

运行机制

小程序的运行历经 启动 - 进入前台 - 退出 - 进入后台 - 销毁这几个流程.

前台 用户打开微信小程序.
后台 用户点击左上角关闭,或者按了设备 Home 键离开微信,小程序并没有直接销毁,而是进入了后台.
销毁 当小程序进入后台一定时间(目前是5分钟),或者系统资源占用过高,才会被真正的销毁.

冷启动 用户首次打开或小程序被微信主动销毁后再次打开,此时小程序需要重新加载启动.
热启动 用户将小程序由后台切换到前台.

更新机制

小程序冷启动时如果发现有新版本,将会异步下载新版本的代码包,并同时用客户端本地的包进行启动,即新版本的小程序需要等下一次冷启动才会应用上。

程序框架

project
├── 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            小程序公共样式表

1. 项目配置

  • 小程序注册 app.js
    App() 函数用来注册一个小程序,开启小程序的生命周期.关于生命周期将在下一章节详述.

    • 全局配置 app.json
      当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

    ```js
    {
    "pages":[
    "pages/index/index",
    "pages/logs/logs"
    ],
    "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "驴妈妈旅游",
    "navigationBarTextStyle":"black"
    },
    "tabBar": {
    "color": "#1296db",
    "selectedColor": "#d81e06",
    "list": [
    {
    "pagePath": "pages/home/home",
    "text": "首页",
    },
    {
    "pagePath": "pages/my/my",
    "text": "我的",
    },
    ]
    },
    "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000

top Created with Sketch.