uniapp项目
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |
目录
一、HBuilder创建项目
文件--新建--项目--默认模板--Vue2--创建
二、引入uView
两种引入方式npm、下载
2.1 npm方式安装
2.1.1 sass
// 安装sass npm i sass -D // 安装sass-loader注意需要版本10否则可能会导致vue与sass的兼容问题而报错 npm i sass-loader@10 -D
2.1.2 下载
// 如果您的项目是HX创建的根目录又没有package.json文件的话请先执行如下命令 // npm init -y // 安装 npm install uview-ui@2.0.31
2.1.3 引入uView主JS库
在项目
src
目录中的main.js
中引入并使用uView的JS库注意这两行要放在import Vue
之后。// main.js import uView from "uview-ui"; Vue.use(uView);
2.1.4 在引入uView的全局SCSS主题文件
在项目
src
目录的uni.scss
中引入此文件。/* uni.scss */ @import 'uview-ui/theme.scss';
2.1.5引入uView基础样式
注意 在
App.vue
中首行的位置引入注意给style标签加入lang="scss"属性<style lang="scss"> /* 注意要写在第一行同时给style标签加入lang="scss"属性 */ @import "uview-ui/index.scss"; </style>
2.1.6 配置easycom组件模式
此配置需要在项目
src
目录的pages.json
中进行。// pages.json { "easycom": { "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue" }, // 此为本身已有的内容 "pages": [ // ...... ] }
2.1.7 Cli模式额外配置
如果您是
vue-cli
模式的项目还需要在项目根目录
的vue.config.js
文件中进行如下配置// vue.config.js如没有此文件则手动创建 module.exports = { transpileDependencies: ['uview-ui'] }
2.2 下载方式安装
间官网 :
下载安装方式配置 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架
三、小程序的分包
在小程序中要求主包不能超过2M主包包括pages、引入到pages里的components、static等在打包的时候会生成vinder、runtime等两者已经为1M以上了所以需要解决
1、分包subPackages
一般是将tabbar在主包pages和tarbbar中注册不用在subPackages中注册
其它非tabbar页面就在subPackges中注册
在pages同级pages_home生成此目录里面可放组件和图片
"subPackages": [{
"root": "pages_home",
"pages": [{
"path": "pages/index"
}]
}],
2、减少pages里的代码减少静态图片的引入可以使用oss图片引入https路径
三、App.vue中的生命周期
onLaunch: function() {
console.log('onLaunch是页面第一次加载的时候会触发')
},
onShow: function() {
console.log('onShow是从别的页面进入后就会触发')
},
onHide: function() {
console.log('onHide是关闭页面后隐藏后')
}
四、工具封装
//在main.js中引入
import util from './utils/util.js'
Vue.prototype.$util = util
//页面中使用
this.$util.***
五、api接口请求封装
六、store
七、加载顺序
页面中的数据DOM树、data、mounted三者之间的加载顺序
若有问题可以用nextTick时间片解决
八、flex的使用
.contrainer {
display: flex;
flex-direction: column;
height: calc(100vh - 94px);
overflow: hidden;
.scroll_box {
flex: 1 100%;
overflow-y: scroll;
}
.fixd_box {
height: 100rpx;
}
}