Vue项目实战

初始

引入字体图标
iconfont
通过App.Vue 全局引入。
复制styles文件夹到project name/src， 如：

如果项目报错，可以试试重新启动服务。
如果还是报错，可查看此篇文章 WebAssembly.instantiate(): Argument 0 must be a buffer source or a WebAssembly.

WXSS

类似于css 但是做了一些扩充

• 尺寸单位
• 样式导入
  微信小程序中 不支持 * 通配符

uni-ui

uni-ui介绍
npm 安装 uni-ui
sass-loader 请使用低于 @11.0.0 的版本，sass-loader@11.0.0 不支持 vue@2.6.12

npm i @dcloudio/uni-ui   或   yarn add @dcloudio/uni-ui

import {uniBadge} from '@dcloudio/uni-ui'
export default {
	components:{
		uniBadge
	}
}

注意
uni-ui不支持使用 Vue.use() 的方式安装

uni api

无需安装，直接使用 uni.request

export default {
	components:{
		uniBadge
	},
	onload(){
		// 1. 原生微信小程序api
		wx.request({
			url:"http://157.122.54.189:9088/image/v3/homepage/vertical",
			success(res){
				console.log(res);
			}
		});
		// 2. uni api使用
		uni.request({
			url:"http://157.122.54.189:9088/image/v3/homepage/vertical"
		})
		.then(res=>{
			console.log(res);
		});
	}
}

sass

sass中文文档

Sass 是一款强化 CSS 的辅助工具.。
SCSS (Sassy CSS)，这种格式仅在 CSS3 语法的基础上进行拓展，所有 CSS3 语法在 SCSS 中都是通用的，同时加入 Sass 的特色功能。
Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器

分段器

在插件市场搜索 分段器。
引入方式：

import { uniSegmentedControl }  from '@dcloudio/uni-ui' // 必须加 {}

export default {
	components:{
		uniSegmentedControl
	},
	data() {
		return {
			items:['选项一','选项二'],
			current:0
		}
	},
	methods: {
		onClickItem(e){
			if(this.current !== e.currentIndex){
				this.current = e.currentIndex;
			}
		}
	},
}

在template使用：

 <view>
        <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button" activeColor="#4cd964"></uni-segmented-control>
        <view class="content">
            <view v-show="current === 0">
                选项卡1的内容
            </view>
            <view v-show="current === 1">
                选项卡2的内容
            </view>
        </view>
    </view>

Map

① Map对象

Map javascript中的对象，储存键值对

一个Map对象在迭代时会根据对象中元素的插入顺序来进行 — 一个 for…of 循环在每次迭代后会返回一个形式为[key，value]的数组。

Map map = new Map();
myMap.set(keyString, "和键'a string'关联的值");
myMap.set(keyObj, "和键keyObj关联的值");
myMap.set(keyFunc, "和键keyFunc关联的值");

② Array.prototype.map()

map() 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

返回一个新的数组

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

而在下面这段分段器代码中，items.map(v=>v.title) 的意思是 将 items.title 返回成一个新的title数组。

 <uni-segmented-control 
		:current="current" :values="items.map(v=>v.title)" 
		@clickItem="onClickItem" 
		styleType="button" activeColor="#4cd964">
		</uni-segmented-control>

// data
data() {
		return {
			items:[
				{title:'推荐'},
				{title:'分类'},
				{title:'最新'},
				{title:'专辑'},
				],
			current:0
		}
	}

封装自己的异步请求

1. 为什么要封装

2. 封装思路

   • 基于原生的promise封装
   • 挂载到Vue的原型上
   • 通过this.request的方式来使用

封装, 新建utils 文件夹，新建request.js

// es6
export default (params)=> {
    // 加载中
    uni.showLoading({
        title:"加载中..."
    })

    return new Promise((resolve, reject)=>{
        wx.request({
            ...params, // 对params 解构
            success(res){
                resolve(res);
            },
            fail(err){
                reject(err);
            },
            complete(){
                uni.hideLoading();
            }
        })
    });
}**

挂载
(挂载的作用是为了全局使用，具体可查看uni-app 全局变量的几种实现方式 )

打开main.js

import request from "./utils/request";  // 导入

Vue.config.productionTip = false
Vue.prototype.request = request;  // 挂载

开发

mode="widthFix" 让高度自适应

moment.js

JavaScript 日期处理类库
moment.js

安装：
npm install moment
引入
import moment from "moment";

Error

1. 如果引入组件时报 component not found， 而没有什么代码错误时，例如：

<script>
// 引入组件
import homeCategory from './home-category';
import homeNew from './home-new';
import homeAlbum from './home-album';
import homeRecommend from './home-recommend';
export default {
	components:{
		homeAlbum,
		homeCategory,
		homeNew,
		homeRecommend:homeRecommend  // 用这种形式就不会报错了
	}
}
</script>

把components 里属性用 homeRecommend:'homeRecommend' 表示