当前位置:文档之家› 百度智能小程序简易教程

百度智能小程序简易教程

具。 单击“工具 > 转换”,即可使用搬家工具,进行转换。
开发解决方案
如果遇到相关问题,可以添加客服微信咨询: 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 工具
相关主题