uni-App-- 开发一次, 多端覆盖是 DCloud 公司使用 vue.js 开发跨平台应用的前端框架, 开发者编写一套代码, 可编译到 iOS,Android,H5, 小程序等多个平台. 如果你写过 vue.JS 项目, 学过小程序, 了解过 mpvue 那太适合花时间了解下 uni-App, 很容易上手.
一. uni-App 项目的创建和运行
uni-App 支持通过 HBuilderX 可视化界面, vue-cli 命令行两种方式快速创建项目.
1. HBuilderX 可视化界面
(1). 下载官方 IDE HBuilderX(下载 App 开发版, 可开箱即用)
(2). 工具栏里的文件 -> 新建 -> 项目, 选择 uni-App, 输入工程名, 即可成功创建 uni-App.
(3). 运行 uni-App
快捷键是 Ctrl+r, 然后选择浏览器, 真机 (iOS, 安卓), 微信 / 支付宝 / 百度 / 字节跳动等小程序开发者工具进行运行.
2. 通过 vue-cli 命令行
(1). 可直接下载标准版, 因为 uni-App 编译插件被安装到项目下了.
(2). 全局安装 vue-cli // NPM install -g @vue/cli
(3). 创建 uni-App // vue create -p dcloudio/uni-preset-vue my-project
二. uni-App 项目的目录结构
注: 静态资源只能存放在 static 文件下, static 目录下的 JS 文件不会被编译, 如果里面有 es6 的代码, 不经过转换直接运行, 在手机设备上会报错. CSS,Less/SCSS 等资源同样不要放在 static 目录下.
三. 编写项目
1. 配置 tabbar(类似于微信小程序, 在 page.JSON 里配置.)
主要代码:
- "pages": [ //pages 数组中第一项表示应用启动页, 参考: https://uniapp.dcloud.io/collocation/pages
- {
- "path": "pages/index/index",
- "style": {
- "navigationBarTitleText": "首页"
- }
- },
- {
- "path": "pages/mine/mine",
- "style": {
- "navigationBarTitleText": "我的"
- }
- }
- ],
- "globalStyle": {
- "navigationBarTextStyle": "black",
- "navigationBarTitleText": "uni-app",
- "navigationBarBackgroundColor": "#F8F8F8",
- "backgroundColor": "#F8F8F8"
- },
- "tabBar": {
- "color": "#7A7E83",
- "selectedColor": "#000000",
- "borderStyle": "black",
- "backgroundColor": "#ffffff",
- "list": [{
- "pagePath": "pages/index/index",
- "iconPath": "static/icon_home.png",
- "selectedIconPath": "static/icon_home_HL.png",
- "text": "首页"
- }, {
- "pagePath": "pages/mine/mine",
- "iconPath": "static/icon_mine.png",
- "selectedIconPath": "static/icon_mine_HL.png",
- "text": "我的"
- }]
- },
2. 用 swiper 实现轮播图 (uni-App 使用 vue 的语法 + 小程序的标签和 API)
关键代码:
- <template>
- <view class="content">
- <!-- 头部轮播 -->
- <view class="carousel-section">
- <!-- 标题栏和状态栏占位符 -->
- <!-- <view class="titleNview-placing"></view> -->
- <swiper class="carousel" circular @change="swiperChange">
- <swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item" @click="navToDetailPage({title:'轮播广告'})">
- <image :src="item.src" />
- </swiper-item>
- </swiper>
- <!-- 自定义 swiper 指示器 -->
- <view class="swiper-dots">
- <text class="num">{{swiperCurrent+1}}</text>
- <text class="sign">/</text>
- <text class="num">{{swiperLength}}</text>
- </view>
- </view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- carouselList: [
- {src: "/static/banner3.jpg",background: "rgb(203, 87, 60)",},
- {src: "/static/banner2.jpg",background: "rgb(205, 215, 218)",},
- {src: "/static/banner4.jpg",background: "rgb(183, 73, 69)",},
- ],
- titleNViewBackground:'',
- swiperCurrent: 0,
- swiperLength: 0,
- }
- },
- onLoad() {
- this.titleNViewBackground = this.carouselList[0].background;
- this.swiperLength = this.carouselList.length;
- this.carouselList = this.carouselList;
- },
- methods: {
- // 轮播图切换修改背景色
- swiperChange(e) {
- const index = e.detail.current;
- this.swiperCurrent = index;
- this.titleNViewBackground = this.carouselList[index].background;
- }
- }
- }
- </script>
- <style lang="scss">
- /* 头部 轮播图 */
- .carousel-section {
- position: relative;
- padding-top: 10px;
- height: 350upx;
- .titleNview-background {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 426upx;
- transition: .4s;
- }
- }
- .carousel {
- width: 100%;
- height: 350upx;
- .carousel-item {
- width: 100%;
- height: 100%;
- padding: 0 0upx;
- overflow: hidden;
- }
- image {
- width: 100%;
- height: 100%;
- border-radius: 10upx;
- }
- }
- .swiper-dots {
- display: flex;
- position: absolute;
- left: 60upx;
- bottom: 15upx;
- width: 72upx;
- height: 36upx;
- background-image:
- background-size: 100% 100%;
- .num {
- width: 36upx;
- height: 36upx;
- border-radius: 50px;
- font-size: 24upx;
- color: #fff;
- text-align: center;
- line-height: 36upx;
- }
- .sign {
- position: absolute;
- top: 0;
- left: 50%;
- line-height: 36upx;
- font-size: 12upx;
- color: #fff;
- transform: translateX(-50%);
- }
- }
- </style>
运行结果:
四. 问题总结
第一次使用 HBuilderX 运行到小程序开发者工具时, 应先配置小程序的相关路径. 才能运行成功.
引入第三方组建时, 报使用了 SCSS/Sass 语言, 但未安装相应编译器的问题.
原因:
没有安装 Sass,Sass 是成熟, 稳定, 强大的 CSS 预处理器, 而 SCSS 是 Sass3 版本当中引入的新语法特性, 完全兼容 CSS3 的同时继承了 Sass 强大的动态功能.
解决方案:
HBuliderX 问题
在编写了代码或修改了新的代码重新编译时, 编译成功发现没有任何变化, 猜测编译器应该没有检测到代码的更新, 并非时时保存, 因此需要重新保存下, 再编译就 OK 了!
4. 适应单位 upx 不支持动态赋值
upx 是 uni-App 提供的一种根据屏幕宽度自适应的动态单位. 以 750 宽的屏幕为基准, 屏幕变宽, upx 实际显示效果会等比放大.
- <!-- - 动态绑定不生效 -->
- <view class="test" :style="{width:winWidth +'upx;'}">
- </view>
解决方案:(使用 uni.upx2px(Number) 转换为 px 后再赋值.)
- <template>
- <view>
- <view class="half-width" :style="{width: halfWidth}">
半屏宽度
- </view>
- </view>
- </template>
- <script>
- export default {
- computed: {
- halfWidth() {
- return uni.upx2px(750 / 2) + 'px';
- }
- }
- }
- </script>
- <style>
- .half-width {
- background-color: #FF3333;
- }
- </style>
5. 很多插件可供参考, 文档, 社区提供帮助
虽然 uni-App 可以跨平台开发, 但是要注意每个平台都有对应的规则限制, 早学早入坑, 趟坑, 就是在为自己积累价值.
来源: http://www.jianshu.com/p/0603f68e4f8d