uni-app 支持开发PC版的 360 小程序 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

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

发表时间:2021-1-11

发布人:葵宇科技

浏览次数:77

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

近期,uni-app新增支持发行到360小程序平台,目前hello uni-app 已上线360小程序,可以在360浏览器中点击链接打开体验

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

通过 HBuilderX 可视化界面

  1. 下载HBuilderX

  2. 创建uni-app项目

HBuilderX开发者工具中,点击文件 -> 新建 -> 项目:选择uni-app类型,输入工程名,选择模板,点击创建,即可成功创建。

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

4. 在360浏览器中导入编译后的目录,见 HBuilderX 控制台输出

5. 在HBuilderX中修改代码,uni-app编译器会热更新到 360浏览器

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

通过vue-cli命令行

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

  1. 全局安装vue-cli
npm install -g @vue/cli

2. 创建uni-app项目,选择项目模板

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

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

3. 使用如下命令进行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原生能力。

相关案例查看更多