百度智能小程序简易教程

具。 单击“工具 > 转换”，即可使用搬家工具，进行转换。
开发解决方案
如果遇到相关问题，可以添加客服微信咨询： wx2swan-helper 。
框架开发
小程序的开发除去常见的原生小程序语法的开发模式，还可以应用层框架开发，用类现代框架 (vue/react) 的语法 去开发小程序，提升开发体验和解决跨平台的问题进入后台，触发 onHide
SWAN App 页面加载完成，触发 onLoad
SWAN App 页面渲染完成，触发 onReady
页面卸载，触发 onUnload 当 SWAN App 发生错误时，会触发
原理图：
生命周期介绍
1、notify:当渲染线程初始化后，向APP服务线程派发消息，请求获取初始化渲染数据； 2、sendInitData:APP 服务线程将初始化渲染数据派发给渲染线程； 3、notify:渲染线程渲染达到Ready状态后，派发消息通知APP服务 线程； 4、SendData:APP服务线程触发onReady事件，向渲染线程传送数据；
版本比较
智能小程序客户端和智能小程序 SWAN 版本号风格为 Major.Minor.Patch（主版本号.次版本号.修订号）。 开 发者可以根据版本号参考以下代码进行兼容性处理：
1. function compareVersion(v1, v2) { v1 = v1.split('.') v2 = v2.split('.') var len = Math.max(v1.length, v2.length)
第二步: 初始化项目
使用命令创建模板项目
1. $ taro init swan-taro也可以参考Taro 开发小程序示例第三步: 安装依赖
进入项目目录，安装依赖
1. $ npm install
第四步: 构建目标代码
开发解决方案
去掉 –watch 将不会监听文件修改，并会对代码进行压缩打包
1. # npm script $ npm run dev:swan // 开发模式 $ npm run build:swan // 线上模式 # 仅限全局安装 $ taro build --type swan --watch $ taro build --type swan
兼容性说明
兼容性说明
随着小程序不断支持更多的功能，旧版本的客户端可能会出现不支持新增功能的情况，因此在使用新增功能时需做兼 容性处理。
通过 swan.getSystemInfo 或者 swan.getSystemInfoSync 获取到小程序的 SWAN 版本号。 通过 swan.canIUse 详情来判断是否可以在该 SWAN 版本下直接使用对应的API或者组件。
删掉构建产物（不包括项目配置文件）并重新构建且带 watch 开发模式 带 watch && 开发 Server 开发模式 删掉构建重新构建（没有 watch && 开发 Server） 生产环境构t 目录，就可以在开发者工具中预览项目。 更多关于 Okam 使用，可以参考 Okam 文档。 生命周期介绍兼容性说明
搬家工具
搬家工具，是基于 Abstract Syntax Tree 开发的辅助工具换，根据台差异带来的苦恼。需要注意的是：工具做不到运行时 diff 的抹平，也做不到一个 API 从无 到有的过程。所以，需要大家根据转换 log，进行二次开发。
如果遇到相关问题，可以社区里提问或者添加客服微信咨询： wx2swan-helper 。
Taro
第一步: 安装开发工具
安装 Taro 开发工具 @tarojs取，也可以直接使用 npx(在 npm 5.2+ 下)
1. $ npm install -g @tarojs/cli $ yarn global add @tarojs/cli
|
|____detail
|
|
|____detail.css
|
|
|____detail.swan
|
|
|____detail.js
|
|____index
|
|
|____index.js
|
|
|____index.swan
|
|
|____index.css
|____app.js
我们看到以下几类的文件：1、 .json 为后缀的 JSON 配置文件，这个文件配置了 SWAN 智能小程序所有页面的 路径和界面展现样式等；2、 .swan 结尾的 SWAN 模板文件，这个文件是用来描述当前这个页面的文件结构，类似 于网页中的 HTML 文件；3、 .css 结尾的 CSS 样式文件，描述页面样式；4、 .js 结尾的 JS 文件，处理这个 页面和用户的交互。
if (num1 > num2) { return 1
} else if (num1 < num2) { return -1
} }
return 0 }
compareVersion('1.11.0', '1.9.9') //版本进行判断兼容的情况下，请使用 SWAN 版本进行判断兼容。
使用命令创建模板项目
1. $ wepy init standard也可以参考WePY开发小程序示例第三步: 安装依赖
进入项目目录，安装依赖
1. $ npm install
第四步: 构建目标代码
注：去掉 –watch 将不会监听文件修改，并会对代码进行压缩打包
1. # 仅限全okam init my-project cd my-project npm install
第三步：构建目标代码
代码
npm run dev
说明 带 watch 开发模式 删掉构建产物（不包括项目配置文件）并重新构建且带 watch 开发模式
开发解决方案
npm run dev:server npm run build npm run prod
开发解决方案选择： 正常 node.js 和 NPM 支持的情况下，因为版本的差异和报错信息抛出的问题，推荐用 NPM 的方式。 在 windows 下，由于 node.js 环境兼容性较差，建议使用开发者工具中的入口。
NPM
执行一下操作，在NPM官网获取工具： 全局按照个命令行工具： npm install -g wx2swan ; 执行命令： wx2swan wxmp wxmp 是微信小程序的目录; 查看生成目录的 log; 根据开发者工具报错以及转换 log 进行二次开发。
while (v1.length < len) { v1.push('0')
} while (v2.length < len) {
v2.push('0') }
for (var i = 0; i < len; i++) { var num1 = parseInt(v1[i]) var num2 = parseInt(v2[i])
第四步: 开发者工具预览在开发者工具中选择打开项目目录下的 dist/swan 目录，就可以在开发者工具中预览项目。
WePY
第一步: 安装开发工具
安装WePY开发工具 wepy-cli ;
1. $ npm install -g wepy-cli@1.7.3-alpha6
开发解决方案
第二步: 初始化项目
生命周期介绍
说明： 每次前台切后台会触发Page的onHide生命周期函数，后台切前台触发Page的onShow。 结构介绍开发解决方案
开发解决方案
开发解决方案
介绍
搬家工具，是基于 Abstract Syntax Tree 开发的辅助工具换，根据台差异带来的苦恼。需要注意的是：工具做不到运行时diff的抹平，也做不到一个API从无到有 的过程。所以，需要大家根据转换log，进行二次开发。
致谢 结构介绍 生命周期介绍 开发解决方案 兼容性说明 体验智能小程序 安装开发者工具 全局配置 页面开发 调试与发布
目录
结构介绍
结构介绍
智能小程序是一种新的开放能力，开发者可以快速地开发一个智能小程序。通过搜索，用户可以在 App 内被便 捷地获取和传播。
框架概述
SWAN App 基本开发思路类似于前端开发，并增强调用大量端能力，性能体验优于普通 Web 。上层架构基于 JS 开 发，可以辅助开发者进行良好得开发。
生命周期介绍
生命周期介绍
生命周期介绍
属性介绍：
属性 onLaunch onShow onHide onLoad onReady onUnload onError
类型 Function Function Function Function Function Function Function
描述
SWAN 初始化的生命周期函 数
接口
开发者可以用以下代码来判断新增API是否支持用户的手机机型：
1. if (swan.createCanvasContext) { swan.createCanvasContext()
SWAN App 展示时调用的 生命周期函数
SWAN App 隐藏时调用的 生命周期函数
监听页面加载的生命周期函 数
监听页面初次渲染完成的生 命周期函数
监听页面卸载的生命周期函 数
错误监听函数
触发时机 当 SWAN App 初始化完成时，会触发 onLaunch（全局只触发一次） SWAN App 从后台进入前台，触发 onShow
第五步: 开发者工具预览在开发者工具中选择打开项目目录下的 dist 目录，就可以在开发者工具中预览项目。
Okam
第一步：安装 CLI 工具