目录
一、HBuilder创建项目
二、引入uView
2.1 npm方式安装
2.2 下载方式安装
三、小程序的分包
三、App.vue中的生命周期
四、工具封装
五、api接口请求封装
六、store
七、加载顺序
八、flex的使用
一、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
在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
http://t.csdn.cn/oVCyM
七、加载顺序
页面中的数据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;
}
}
