# 小程序快速开发
# 准备开发环境
1.安装开发者工具
若本地已安装了lighting工具,直接升级至最新版本即可
npm install lighting -g
若本地尚未安装,请先安装lighting工具。
2.安装 miniprogram 插件
light plugin -a miniprogram2
老版miniprogram插件安装(不再更新)
light plugin -a miniprogram
# 创建一个GMU小程序
$ light create -t mp
light小程序工程目录结构大致如下:
├── build
├── dist
├── project.json
├── src
│ ├── app.js
│ ├── app.json
│ ├── app.wxss
│ ├── image
│ │ ├── arrowright.png
│ │ └── wechat.png
│ ├── pages
│ │ ├── index
│ │ │ ├── index.js
│ │ │ ├── index.json
│ │ │ ├── index.wxml
│ │ │ └── index.wxss
│ │ │── logs
│ │ │ ├── logs.js
│ │ │ ├── logs.json
│ │ │ ├── logs.wxml
│ │ │ └── logs.wxss
│ └── utils
│ └── util.js
build
主要存放编译后light小程序资源。dist
主要存放编译后资源,其中包含三个子目录,wx、web、light分别对应微信小程序、web运行时和light小程序三种不同的运行环境所需要使用的资源。project.json
小程序的配置文件和主要的工程描述文件。
小程序的所有源代码均位于src
目录当中,该目录中的目录结构与微信小程序的源代码组织方式并无二致。
src/app.js
小程序的主要入口文件,用于定义小程序应用级别的生命周期和全局逻辑。src/app.json
小程序的运行时配置文件,用于定义容器与资源状态。src/app.wxss
全局的通用样式文件。src/pages
主要包含小程序的视图,每一个page都需要定义在src/app.json
才可以被编译和使用,每一份配置文件均最多包含js/wxml/wxss/json四种文件,分别代表逻辑、结构、样式、配置四种视图信息。
# 查看日志
在 app.js 中加入如下代码,即可开启 vConsole,方便在下一步预览过程中查看日志。注:不要在生命周期中设置。
App({
//
})
__base__.DEBUG_MODE = true; //true表示开启,默认为false
# 编译运行工程
通过下面的指令可以将工程的源代码编译,编译成功后,工具会自动打开浏览器,并打开项目的http地址,至此每一次对源代码的修改都会触发页面内容的自动编译和热更新,可以使开发者在无感知的情况下快速开发。浏览器仅展示web环境下的效果,实际小程序的运行效果可以在下一步的调试中查看。
$ light release -wb
在浏览器控制台会打印预览二维码,分别是H5和小程序:
用 LightView 扫描浏览器控制台的小程序预览二维码,即可预览效果。
# 打包
执行以下命令可进行打包,打成功的zip包可发布到Light平台。详情参考小程序发布。
$ light release -p
# 访问小程序
小程序打包发布后,可以运行在LightApp环境中,由H5/JSNative页面跳转至小程序页面即可访问该小程序。
打开独立窗体的小程序:
Light.navigate("gmu://miniapp",
{
id: 'xxxxxxxxxx' //Light平台对应的小程序id
}
)
打开远程小程序:
Light.navigate("https://xxx.lightyy.com/app.miniapp.js", //远程小程序的访问地址
{
a: 1, //参数
b: 2
}, {
miniappContainer: 'miniapp'
}
)
# 指定miniprogram版本
若需要指定miniprogram插件版本,则需手动在project.json中的plugins指定,不可同时指定两个版本。
版本2(最新版本):
{
"plugins": ["miniprogram2"],
}
版本1(不再更新)
{
"plugins": ["miniprogram"],
}