内容简介:百度小程序开放半年多以来,作为大部分开发者,你一定是照着小程序的官方文档,用着组件和API,撸出一套代码发布上线。大部分人心里,都会有这样的疑问:我已经有微信小程序了,能不能利用现有代码快速开发或者生成百度小程序?百度小程序、微信小程序、支付小程序、XX小程序等等,有没有统一的框架,一次开发,多平台运行? 以下从开发百度小程序入手,给大家带来非常规建议。我们根据这张图,分成不同的开发场景:根据这张图,我们可以看到,针对已有的微信小程序,我们可以通过
百度小程序开放半年多以来,作为大部分开发者,你一定是照着小程序的官方文档,用着组件和API,撸出一套代码发布上线。大部分人心里,都会有这样的疑问:我已经有微信小程序了,能不能利用现有代码快速开发或者生成百度小程序?百度小程序、微信小程序、支付小程序、XX小程序等等,有没有统一的框架,一次开发,多平台运行? 以下从开发百度小程序入手,给大家带来非常规建议。
我们根据这张图,分成不同的开发场景:
根据这张图,我们可以看到,针对已有的微信小程序,我们可以通过 搬家工具
去快速生成百度小程序,适当的二次开发修改联调去发布上线百度小程序;我们也可以利用 小程序应用层框架
去做跨平台的事儿。
搬家工具
搬家 工具 就是针对用原生微信语法开发的微信小程序,生成百度小程序代码。
搬家工具,是基于 Abstract Syntax Tree
开发的辅助工具,可以帮助您把微信小程序的部分代码迁移到百度智能小程序上。工具可进行静态语法上的转换,根据一些规则去转换代码,抹平微信小程序语法和百度智能小程序语法上的差异,为大家减少因平台差异带来的苦恼。 需要注意的是:工具做不到运行时diff的抹平,也做不到一个API从无到有的过程。所以,需要大家根据转换log,进行二次开发。搬家工具官方文档 搬家工具npm文档 搬家工具解析
应用层框架开发
小程序的开发除去常见的原生小程序语法的开发模式,还可以应用层框架开发,用类现代框架 (vue/react) 的语法去开发小程序,提升开发体验和解决跨平台的问题。以下我们用4个框架举例,主要讲解如何用常见的小程序框架开发百度小程序。
Taro
第一步: 安装开发工具
安装Taro开发工具 @tarojs/cli
; 使用npm或者yarn的方式都可以获取,也可以直接使用npx(在npm 5.2+下)
$ npm install -g @tarojs/cli $ yarn global add @tarojs/cli 复制代码
第二步: 初始化项目
使用命令创建模板项目
$ taro init swan-taro 复制代码
也可以参考 Taro开发百度小程序示例
第三步: 安装依赖
进入项目目录,安装依赖
$ npm install 复制代码
第四步: 构建目标代码
注:去掉 --watch 将不会监听文件修改,并会对代码进行压缩打包
# npm script $ npm run dev:swan // 开发模式 $ npm run build:swan // 线上模式 # 仅限全局安装 $ taro build --type swan --watch $ taro build --type swan 复制代码
第五步: 开发者工具预览
在百度开发者工具中选择打开项目目录下的 dist
目录,就可以在开发者工具中预览项目。
Tips && 文档
mpvue
第一步: 初始化项目
使用示例项目:
$ git clone git@github.com:hucq/mpvue-platform-sample.git 复制代码
也可以参考 mpvue百度小程序demo
第二步: 安装依赖
进入项目目录,安装依赖
$ npm install $ npm install mpvue@beta mpvue-loader@beta mpvue-template-compiler@beta 复制代码
第三步: 构建目标代码
$ npm run dev:swan // 开发模式 $ npm run build:swan // 线上模式 复制代码
第四步: 开发者工具预览
在百度开发者工具中选择打开项目目录下的 dist/swan
目录,就可以在开发者工具中预览项目。
Tips && 文档
WePY
第一步: 安装开发工具
安装WePY开发工具 wepy-cli
;
$ npm install -g wepy-cli@1.7.3-alpha6 复制代码
第二步: 初始化项目
使用命令创建模板项目
$ wepy init standard 复制代码
也可以参考 WePY开发百度小程序示例
第三步: 安装依赖
进入项目目录,安装依赖
$ npm install 复制代码
第四步: 构建目标代码
注:去掉 --watch 将不会监听文件修改,并会对代码进行压缩打包
# 仅限全局安装 $ wepy build -o baidu --watch $ wepy build -o baidu 复制代码
第五步: 开发者工具预览
在百度开发者工具中选择打开项目目录下的 dist
目录,就可以在开发者工具中预览项目。
Tips && 文档
Okam
第一步:安装 CLI 工具
- Node 安装(要求 Node >=8 && NPM >= 3),具体安装可以到官网下载;
- CLI 工具安装:
$ npm install okam-cli -g 复制代码
第二步:初始化项目
$ okam init my-project $ cd my-project $ npm i 复制代码
以上所述就是小编给大家介绍的《智能小程序档案馆——你不知道的开发百度小程序的新姿势》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
国际大学生程序设计竞赛例题解
郭嵩山 / 电子工业出版社 / 2007-7 / 32.00元
《国际大学生程序设计竞赛例题解3:图论、动态规划算法、综合题专集》以图论、动态规划算法、综合题的形式介绍了ACM国际大学生程序设计竞赛(ACM/ICPC)中所用到的典型算法,并结合例题,对如何灵活地运用这些算法进行比较详细分析和深入浅出的讲解。《国际大学生程序设计竞赛例题解3:图论、动态规划算法、综合题专集》以精讲多练为教学宗旨,并在每一个专题论述后用一章的篇幅选出一批有代表性的竞赛例题,对每道例......一起来看看 《国际大学生程序设计竞赛例题解》 这本书的介绍吧!