网赚网为广大上网爱好者提供目前网上赚钱好项目,以及大学生兼职网赚、就业平台。网赚网免费公益公开课讲座教程,网赚纯干货技术分享,让你轻松做网赚,在家等收入,还在等什么,轻松登陆,赶快加入我们,安全更可靠!

智能小程序档案馆——你不知道的开发百度小程序的新姿势

2019-01-20 04:22:20 栏目 : PC软件 围观 : 评论
百度小程序开放半年多以来,作为大部分开发者,你一定是照着小程序的官方文档,用着组件和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 && 文档

  • Taro开发百度小程序
  • Taro 官方文档

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 && 文档

  • mpvue开发百度小程序
  • mpvue 官方文档

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 && 文档

  • WePY开发百度小程序
  • WePY 官方文档

Okam

第一步:安装 CLI 工具

  • Node 安装(要求 Node >=8 && NPM >= 3),具体安装可以到官网下载;
  • CLI 工具安装:
$ npm install okam-cli -g 复制代码

第二步:初始化项目

$ okam init my-project $ cd my-project $ npm i 复制代码

相关文章

  • 这么多平台的小程序?来实现一个less自动编译工具
    这么多平台的小程序?来实现一个less自动编译工具

    监听less文件变化原地生成css文件,这个功能在诸多编辑器上的插件都能实现,通过配置,也可以改变生成文件的后缀名,比如wxss,acss等。但是当我接到公司小程序项目的时候,第一反应还是想自己动手实现一个。原因是: ......

    2019-03-06 微信小程序联盟
  • 小程序:无限自动滚动的Gallery
    小程序:无限自动滚动的Gallery

    遇到一个需求,需要在小程序内实现自动轮播的画廊效果,如果是网页版的话有大量现成的库可以用,但小程序找了一圈没找到有类似的库,只好自己想办法了。 在踩了多个坑之后找到最简单的方法,就是用CSS animation来实 ......

    2019-01-18 微信小程序联盟
  • 小程序测试注销功能,对创业者来说可能是个好消息
    小程序测试注销功能,对创业者来说可能是个好消息

    近日,微信小程序注销能力进入灰度测试,开发者可自行在后台进行小程序的注销。微信正努力帮助开发者管理他们曾经注册过的小程序。根据腾讯客服官网描述,目前平台支持个人、组织、政府等类型账号自主注销。小程序管 ......

    2019-03-02 微信小程序联盟
  • 关于小程序的基础库
    关于小程序的基础库

    小程序的基础库,它包含了哪些东西,以及载入、更新的机制又是怎样的呢。小程序基础库的组成基础库成分关于基础库的成分,不得不提到我们之前说过的小程序渲染机制,参考 React 的 Virtual DOM。基础库除了处理 VD ......

    2019-02-17 微信小程序联盟
  • 小程序基因论:BAT都将连接什么样的世界?
    小程序基因论:BAT都将连接什么样的世界?

    编者按:本文来源微信公众号天浩观察,作者师天浩,创业邦经授权转载。小程序BATT格局已经形成,2019年或还将有其他互联网公司加入,但腾讯、阿里、百度、头条四强地位无法撼动,因为它们占据了中国移动互联网7成以 ......

    2019-03-07 微信小程序联盟
  • 小程序 Serverless: 解放生产力,驱动研发效能提升
    小程序 Serverless: 解放生产力,驱动研发效能提升

    摘要:以“数字金融新原力(The New Force of Digital Finance)”为主题,蚂蚁金服ATEC城市峰会于2019年1月4日于上海如期举办。ATEC移动开发专场分论坛上,蚂蚁金服前端技术专家袁收纳带来了主题为《小程序 Serverles ......

    2019-02-27 微信小程序联盟
  • 怎样才能一天赚500?这些一天挣300
    怎样才能一天赚500?这些一天挣300

    怎样才能一天赚500?,不说这么死,就说一天挣300-500的方法吧,这在很多人看来也许是天方夜谭,因为他们的工资一月才三四千,但是现在却是可以实现的,当然如果你好吃懒做梦想天上掉馅饼,一天不要说赚三五百元,你就是三五十元都赚不到。我们现在处于一个非常好的时代...

    2019-01-18 一天挣300-500的方法一天赚500一天赚300
  • 手机赚钱:老司机教你如何用一部手机日赚百元?
    手机赚钱:老司机教你如何用一部手机日赚百元?

    如何用手机日赚百元?现在手机赚钱的软件和项目虽多,但真的要做到日赚百元还真不容易,大多数网友用手机赚钱的收入还停留在赚零花的阶段,一天几元钱的收入,随时都可以放弃不做。甚至很多人都想不明白,那些网络上宣传自己一天赚几百元的收款图到底是真是假,其实我...

    2019-03-01 一部手机如何赚钱手机赚钱如何用手机日赚百元
  • 小程序端实现文本展示以及标题定位
    小程序端实现文本展示以及标题定位

    探讨一个针对文本内容设置标题定位的业务场景。 业务场景 管理后台录入/编辑一段md或富文本协议,小程序端进行展示协议,且在小程序实现标题侧边栏,能快速定位至对应的内容。如图所示 管理后台:录入内容实现方式 ......

    2019-02-19 微信小程序联盟
  • 微信小程序 - 富文本图片宽度自适应
    微信小程序 - 富文本图片宽度自适应

    引言:在微信小程序里,比如商品展示页面的商品详情会有图片展示,PC端设置的商品详情是PC端的宽度,所以在小程序里图片会显示不全,这时就应该做相应的处理,使小程序里图片显示正确 思路 把图片的宽度改为手机屏 ......

    2019-01-18 微信小程序联盟