uni-app卖座电影多端开发纪实（一）：创建项目

搬砖的乔布梭
521 阅读3分钟

@关于uni-app

  • 今日之C端主要都是跑在手机而非PC上了，其形态也以小程序、App、手机H5页面为主了；
  • 大前端之C端 作品拿粗给人看，也十之八九要掏手机了；
  • 好在我们有 宇宙制霸人间值得流芳千古不可一世之我是大天才——uni-app!
  • 基于Vue+uni-app做开发，一套代码多端打包，老板省钱码农happy！
  • 赶紧安排上了各位老铁！HOLD，戳太猛废鼠标，戳之→ uni-app官网

image.png

@准备工作

申请微信小程序

  • 各位大虾自行到 微信公众平台 注册账号并申请一个小程序；
  • 微信扫码进入小程序的管理后台，在开发管理/开发设置项中找到小程序的AppID，这个东东很重要！记下来备用；

image.png

下载安装微信开发者工具

  • 到 微信小程序官方文档 中下载微信开发者工具的稳定版；
  • 一路傻瓜式安装即可，安装路径不要有中文！

下载安装HBuilderX

  • HBuilderX官网 首页下载HBuilderX；
  • 一路傻瓜式安装即可，安装路径不要有中文！

下载安装夜神手机模拟器

发车！

image.png

@创建工程

创建工程

  • 打开HBuilderX，文件-新建-项目；
  • 选择uni-app + 默认模板 + Vue2（目前uni-app的主流开发框架依然是Vue2，很多组件库和主流插件的兼容性也只做到了Vue2），配置如图：

image.png

工程结构一览

image.png

  • pages/xxx/xxx.vue = 页面组件
  • static = 静态资源目录
  • App.vue = 根组件
  • index.html = 单页面入口
  • main.js = 主逻辑入口
  • manifest.json = 多端配置文件
  • pages.json = 组件、页面、导航、分包配置
  • uni.scss = 全局样式变量

@集成uView组件库

  • uni-app内置组件库 看这里；
  • 这里再介绍一套很流行的第三方组件库 uView
  • 这里基于NPM + easycom介绍它的集成方式；

NPM接管项目依赖

cd <工程目录>
npm init -y

安装uView

// 安装node-sass
npm i node-sass -D

// 安装sass-loader
npm i sass-loader -D

// 安装uview
npm install uview-ui@1.8.4

@配置easy-com

什么是easy-com

  • easy-com就是easy component，就是要把传统的组件引入+声明子组件+部署，三步合而为一，使代码变得更简洁；
  • 无论是自己的组件，还是外来组件，只需要遵守easy-com的路径规范就能直接在模板中部署，无需引入+声明了；
  • 具体参见官网解释 easy-com

配置uView系列组件为easy-com

此处按照 uView安装配置方式 进行easy-com配置

pages.json

// pages.json
{
    // 所有<u-xxx></u-xxx>组件 从node_modules中的对应位置去寻找
    "easycom": {
        "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
    },

    // 页面声明
    "pages": [
        // ......
    ]
}

@项目配置

配置APP启动图标

image.png

预览之 image.png

还行吧！！——我选的图片还行吧 🤪🤪🤪

配置App名称

  • 在上图manifest.json的【基础配置】中设置，比较简单就不再贴图了

最终App打包效果↓↓

image.png

配置小程序的AppID

image.png

@运行到多端

运行为手机Web/H5项目

  • HBuilderX：运行-运行到浏览器-Chrome
  • 用户手机浏览器访问时效果如下↓↓

image.png

运行为小程序项目

  • HBuilderX：运行-运行到小程序模拟器-微信开发者工具；
  • HBuilderX会自动打开微信开发者工具；
  • HBuilderX首次运行到微信开发者工具时需要进行一下关联，按照提示进行关联即可；
  • 用户手机小程序访问时效果如下↓↓

image.png

运行为安卓App

  • 打开夜神模拟器；
  • HBuilderX：运行-运行到手机或模拟器-运行到安卓App基座；
  • HBuilderX会自动检测到夜神模拟器的运行端口并运行过去；
  • 用户手机App访问时效果如下↓↓（PS：此处模拟器分辨率较低，真机上运行效果更佳）

image.png

😈 点赞收藏加关注了吗？？

image.png

本项目源码 watch,follow,fork！！！

祝大家撸码愉快~

avatar
文章
阅读
粉丝