目录

一、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"属性

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

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;}}