本节介绍结合微信小程序与Bucky构建项目

准备微信小程序环境

下载最新版微信小程序IDE:https://mp.weixin.qq.com/cgi-bin/wx 申请微信小程序AppID

创建微信小程序示例

微信小程序的例子包含两个:

  • wechat 是微信小程序例子
  • wegame 是微信小游戏例子

首先,选择从示例项目初始化解决方案,并选择wechat这个示例:

bucky init -i

其次,构建项目,并初始化konwledges:

bucky build
bucky k -reset

测试rpc调用:

bucky run -main test/calc/test_calc.js

使用微信小程序IDE打开目录src/client/ 等待小程序界面加载完成,可以看到小程序界面上显示了加载bucky cloud上的calc计算除法的结果。

可以看下目录结构:

├── dist
│   ├── ...
├── knowledges.json
├── solution.json
├── src
│   ├── client
│   │   ├── app.js
│   │   ├── app.json
│   │   ├── app.wxss
│   │   ├── core
│   │   │   ├── bucky_meta.js
│   │   │   ├── bucky_packages.js
│   │   │   ├── lib
│   │   │   ├── packages
│   │   │   ├── wx_core.js
│   │   │   └── wx_ld_core.js
│   │   ├── pages
│   │   │   ├── index
│   │   │   └── logs
│   │   ├── project.config.json
│   │   └── utils
│   │       └── util.js
│   └── server
│       └── calc
│           ├── calc.js
│           ├── config.json
│           └── onload.js
└── test
    └── calc
        └── test_calc.js

项目结构:

  • src/server是bucky项目,下面的calc是个bucky XARPackage。
  • src/client是微信小程序项目,而src/client/core下放了bucky的微信小程序适配运行时。
  • src/client/core是bucky工具在build时生成的,包含
    • bucky核心库wx_core.js
    • bucky初始化需要的配置文件bucky_meta.js,bucky_packages.js
    • src/client/core/packages/目录下是src/server/下的XAR Package的代理

在微信小程序的程序入口src/client/pages/index.js里包含了初始化bucky并对calc:calc模块发起RPC调用的示例代码。

新建微信小程序新项目。

bucky命令行工具支持在解决方案内创建一个新的微信小程序项目,步骤如下:

  1. 创建一个微信小程序项目
  2. 创建bucky项目,添加XARPackage
  3. 在微信小程序项目里调用bucky项目的XARPackage的接口。

创建微信小程序项目

首先,创建目录,并进入交互式初始化,选择新建解决方案:

mkdir wxtest
cd wxtest
bucky init -i

接着,添加新项目,输入项目目录: src/client/wx

然后是,选择项目类型为:

请选择项目类型:
────────────────────
1. bucky项目(后台)
2. HTML5(前端)
3. 微信小程序(前端)
4. ReactNative(前端)

此处选择序号3,创建包含bucky初始化的微信小程序代码。

接着会提示选择微信小程序对子类别:

微信小程序子类别:
────────────────────
1. 微信小程序
2. 微信小游戏

按需选择。

创建bucky项目

创建完毕后,提示$继续添加project? [y/n]:,输入y,继续创建一个bucky项目:

  • 输入项目路径为src/server
  • 选择bucky项目(后台)类型
  • 输入packagename为calc
  • 选择示例package,
  • 选择只允许后端
  • 一路输入n

在ReactNative项目里调用bucky项目的XARPackage的接口。

打开src/client/wx/pages/index.js 可以看到Bucky初始化的函数已经准备好了,根据注释的提示,编写调用calc:calc模块的div2接口的代码。

亦可参考本节上面的微信小程序demo

构建,运行

最后,使用bucky工具构建,测试

bucky build
bucky k -reset
bucky run -main test/calc/test_calc.js

使用微信小程序IDE打开src/client/wx调试微信小程序.

--全文完--

results matching ""

    No results matching ""