小程序快速开发

准备开发环境

1.安装开发者工具

若本地已安装了lighting工具,直接升级至最新版本即可

npm install lighting -g

若本地尚未安装,请先安装lighting工具

2.安装 miniprogram 插件

light plugin -a miniprogram

创建开发工程

$ 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四种文件,分别代码逻辑、结构、样式、配置四种视图信息。

编译运行工程

通过下面的指令可以将工程的源代码编译,编译成功后,工具会自动打开浏览器,并打开项目的http地址,至此每一次对源代码的修改都会触发页面内容的自动编译和热更新,可以使开发者在无感知的情况下快速开发。浏览器仅展示web环境下的效果,实际小程序的运行效果可以在下一步的调试中查看。

$ light release -wb

在浏览器控制台会打印预览二维码,分别是H5和小程序:

LightView 扫描浏览器控制台的小程序预览二维码,即可预览效果。

查看日志

在 app.js 中加入如下代码,即可开启 vConsole,方便在下一步预览过程中查看日志。

App({
onLaunch(options) {
__base__.DEBUG_MODE = true; //true表示开启,默认为false
}
})

打包

执行以下命令可进行打包,打成功的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'
}
)