uni-app
是一个遵循 Vue.js
语法的跨端框架,开发者编写一套代码,可发布到App、H5、小程序(微信/阿里/百度/字节跳动)及快应用。
近期,uni-app
新增支持发行到360小程序平台,目前hello uni-app 已上线360小程序,可以在360浏览器中点击链接打开体验:so.mp.360.cn
如下是简易体验教程,Enjoy~
通过 HBuilderX 可视化界面
-
下载HBuilderX,官方地址
-
创建
uni-app
项目
在HBuilderX
开发者工具中,点击文件 -> 新建 -> 项目
:选择uni-app
类型,输入工程名,选择模板,点击创建,即可成功创建。
- 进入已创建的项目,点击工具栏的运行 -> 运行到小程序模拟器 -> 360开发者工具,等待编译完成时自动调起
360浏览器
-
在360浏览器中导入编译后的目录,见
HBuilderX
控制台输出 -
在
HBuilderX
中修改代码,uni-app
编译器会热更新到360浏览器
注意: 运行时为未压缩代码,正式上线时需要点击发行菜单
通过vue-cli命令行
习惯cli
脚手架的同学,可以通过vue-cli
创建uni-app
项目。
- 全局安装vue-cli
npm install -g @vue/cli
- 创建
uni-app
项目,选择项目模板
vue create -p dcloudio/uni-preset-vue my-project
此时,会提示选择项目模板,初次体验建议选择 hello uni-app
项目模板,如下所示:
- 使用如下命令进行360小程序的编译预览及发行打包
# npm script
# dev 模式,编译预览
$ npm run dev:mp-360
# build 模式,发行打包
$ npm run build:mp-360
发行到360小程序,需要你下载并打开360浏览器,然后选择项目编译目录(dev模式、build 模式编译目录不同,见下方说明)进行预览或发行。
dev模式 和 build 模式的区别:
- dev 模式编译目录为项目根目录下的
/dist/dev/
目录 - build 模式编译目录为项目根目录下的
/dist/build/
目录 - dev 模式有 SourceMap 可以方便的进行断点调试
- build 模式会将代码将会进行压缩,体积更小更适合发布为正式版应用
开发规范
uni-app
内置的组件及API已兼容360小程序,详见uni-app官网
对于 360 小程序特殊的组件及API,可以通过条件编译调用360原生能力。
问题反馈
大家在使用 uni-app
开发360小程序时,若碰到问题,欢迎到 DCloud问答社区交流反馈。