uni-app 支持PC版的 360 小程序

Love The Way You Lie 2023-02-23 12:30 29阅读 0赞

`uni-app` 是一个遵循 `Vue.js` 语法的跨端框架，开发者编写一套代码，可发布到App、H5、小程序（微信/阿里/百度/字节跳动）及快应用。

近期，`uni-app`新增支持发行到360小程序平台，目前[hello uni-app][] 已上线360小程序，可以在360浏览器中点击链接打开体验：[so.mp.360.cn][]

如下是简易体验教程，Enjoy~

## 通过 HBuilderX 可视化界面 ##

1.  下载HBuilderX，[官方地址][Link 1]
2.  创建`uni-app`项目

在`HBuilderX`开发者工具中，点击`文件 -> 新建 -> 项目`：选择`uni-app`类型，输入工程名，选择模板，点击创建，即可成功创建。  
![format_png][]

1.  进入已创建的项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 360开发者工具，等待编译完成时自动调起 `360浏览器`

![format_png 1][]

1.  在360浏览器中导入编译后的目录，见 `HBuilderX` 控制台输出
2.  在`HBuilderX`中修改代码，`uni-app`编译器会热更新到 `360浏览器`

注意: 运行时为未压缩代码，正式上线时需要点击发行菜单

## 通过vue-cli命令行 ##

习惯`cli`脚手架的同学，可以通过`vue-cli`创建`uni-app`项目。

1.  全局安装vue-cli

npm install -g @vue/cli

1.  创建`uni-app`项目，选择项目模板

vue create -p dcloudio/uni-preset-vue my-project

此时，会提示选择项目模板，初次体验建议选择 `hello uni-app` 项目模板，如下所示：

![format_png 2][]

1.  使用如下命令进行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官网][uni-app]

对于 360 小程序特殊的组件及API，可以通过[条件编译][Link 2]调用360原生能力。

## 问题反馈 ##

大家在使用 `uni-app` 开发360小程序时，若碰到问题，欢迎到 DCloud问答社区交流反馈。

[hello uni-app]: https://github.com/dcloudio/hello-uniapp
[so.mp.360.cn]: https://so.mp.360.cn/mp.html?appid=qh4j181qqtru354st6
[Link 1]: https://dcloud.io/hbuilderx.html
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcuY2RuLmFsaXl1bi5kY2xvdWQubmV0LmNuL3VuaS1hcHAvZG9jL2NyZWF0ZS5wbmc?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcuY2RuLmFsaXl1bi5kY2xvdWQubmV0LmNuL3VuaS1hcHAvZG9jL3VuaS1hcHAtZGVidWctbXAtMzYwLnBuZw?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcuY2RuLmFsaXl1bi5kY2xvdWQubmV0LmNuL2d1aWRlL3VuaWFwcC9oNS1jbGktMDEucG5n?x-oss-process=image/format,png
[uni-app]: https://uniapp.dcloud.net.cn/
[Link 2]: https://uniapp.dcloud.net.cn/platform