微信小程序

一、环境设置

1. 注册个账号 https://mp.weixin.qq.com/
2. 在https://mp.weixin.qq.com/下载开发者工具(稳定版) (模拟器)
3. 设置-安全-开启服务端口
4. 在HbuilderX官网下载HbuilderX(APP开发版)

二、开始

1、HbuilderX创建项目

新建/uni-app/uni-ui项目

2、manifest.json

基础配置：DCloud AppID
微信小程序配置：微信小程序AppID，小程序首页/配置服务器/开发设置
运行

3、资源网站

https://developers.weixin.qq.com/community/homepage
https://uniapp.dcloud.io/component/swiper?id=swiper

三、项目

1、修改标题

// package.json
	"pages": [
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "果园"
			}
		},

2、导航栏tabBar

package.json文件修改后需要重新编译

// package.json
{
	"pages": [
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "果园"
			}
		},
        {
        	"path": "pages/category/newFresh",
        	"style": {
        		"navigationBarTitleText": "果园"
        	}
        },
		{
			"path": "pages/cart/myCart",
			"style": {
				"navigationBarTitleText": "果园"
			}
		},
		{
			"path": "pages/myOrchard/myOrchard",
			"style": {
				"navigationBarTitleText": "果园"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "果园",
		"navigationBarBackgroundColor": "#ffffff",
		"backgroundColor": "#ffffff",
		"app-plus": {
			"background": "#ffffff"
		}
	},
	"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#3cc51f",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"list": [{
			"pagePath": "pages/index/index",
			"iconPath": "static/tabs/home.png",
			"selectedIconPath": "static/tabs/home-active.png",
			"text": "首页"
		}, {
			"pagePath": "pages/category/newFresh",
			"iconPath": "static/tabs/category.png",
			"selectedIconPath": "static/tabs/category-active.png",
			"text": "分类"
		},{
			"pagePath": "pages/cart/myCart",
			"iconPath": "static/tabs/cart.png",
			"selectedIconPath": "static/tabs/cart-active.png",
			"text": "购物车"
		},{
			"pagePath": "pages/myOrchard/myOrchard",
			"iconPath": "static/tabs/me.png",
			"selectedIconPath": "static/tabs/me-active.png",
			"text": "我的果园"
		}]
	}
}

3、navigator跳转

<navigator url="../category/newFresh" hover-class="navigator-hover" open-type="switchTab">
	<image style="width: 50px; height: 50px;"
	:src="item.image" mode='scaleToFill'></image>
	<text>{{item.name}}</text>
</navigator>

navigator语句正确，可页面就是无法跳转：

1.跳转的页面没有在app.json页面中注册。如果是这种问题会在控制台弹出错误，留意控制台即可；
2.跳转的路径不正确。初学时不太注意会出现这种问题，这种问题同样会在控制台弹出错误。
3.跳转的页面位于TabBar中。这种情况不会在控制台弹出错误，需要自己去检查，解决的办法是将navigator改成switchtab即可。

4、轮播图swiper

data() {
	return {
		imgArr:[
			'../../static/images/banner-1.jpg',
			'../../static/images/banner-2.jpg',
			'../../static/images/banner-3.jpg',
			'../../static/images/banner-4.jpg',
			'../../static/images/banner-5.jpg',
		]
	}
},

<view class="page-section swiper">
	<view class="page-section-spacing">
		<swiper class="swiper" indicator-dots="true" autoplay="true" interval="2000" duration="500">
			<swiper-item v-for="(item,index) in imgArr" :key="index" >
					<image style="width: 380px; height: 153px;" 
					:src="item" mode='scaleToFill'></image>
			</swiper-item>
		</swiper>
	</view>
</view>

5、引入公共样式

// app.vue文件
</script>
<style>
    // 全局样式
	@import 'pages/src/css/public.css';
</style>

</script>
<style>
    // 局部样式
	@import '../src/css/index.css';
</style>

6、src字符串拼接

<view v-for="(item,index) in contentArr" :key="index">
    <image :src="'../../static/'+item.image" mode='scaleToFill'></image>
</view>

7、v-for循环次数

// slice()截取数组
<view v-for="(ele,index) in item.content.slice(0 , 3)" :key="index">

8、文本超出…

.senCenNav{
	overflow:hidden;
	width: 130px;
	text-overflow: ellipsis;
	white-space: nowrap
}

9、iconfont

// App.vue
<style>
	@import 'pages/src/css/public.css';
	@import url("/static/iconfont/iconfont.css");
</style>

// iconfont.css
@font-face {
  font-family: "iconfont"; /* Project id 2621388 */
  src: url('~@/static/iconfont/iconfont.ttf');
}

// 使用
<text class="iconfont icon-xiangzuojiantou"></text>

10、自定义导航栏

{
	"path": "pages/category/subcategory",
	"style": {
		"navigationStyle": "custom"
	}
}

插件：uni-nav-bar 自定义导航栏 https://ext.dcloud.net.cn/plugin?id=52

11、导航栏传参

// 传递参数
<navigator :url="'./subcategory?cateId='+item.className.id+'&subcateId='+ele.id" hover-class="navigator-hover" class="senCenNav">

// 接收参数
methods:{
},
onLoad(options){
	console.log(options)
}

12、页面滚动(剩余高度)

<scroll-view class="content" scroll-y :style="{height:scrollHeight+'px'}">
</scroll-view>

data() {
	return {
		scrollHeight: 0, //元素的所需高度
	}
},

onReady() {
	let _this = this;

	uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
		success(res) { //成功回调函数
			let wHeight = res.windowHeight //windoHeight为窗口高度，主要使用的是这个
			let titleH = uni.createSelectorQuery().select(".content"); //想要获取高度的元素名（class/id）
			titleH.boundingClientRect(data => {
				_this.scrollHeight = wHeight - data.top //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
			}).exec()
		}
	})
},

13、uni-app图标

https://hellouniapp.dcloud.net.cn/pages/extUI/icons/icons

<icon type="success" size="26" color="#cccccc"/>

14、字符串过滤数字和()

// 去除字符串中的数字和括号
export function deleteNum(str){
      let reg = /[0-9 ( )]+/g;
      let str1 = str.replace(reg,"");
      return str1;
}

15、四周阴影

box-shadow:#cccccc 0px 0px 10px;

16、tab切换

<text v-for="(item,index) in product_detail.productItem" :key="index" class="sel-item" :class="{active:num==index}" @click="num=index">
	{{item.volume}}
</text>

.sel-item{
	padding: 14rpx 24rpx;
	box-shadow:#cccccc 0px 0px 10px;
	margin: 20rpx 0;
	display: inline-block;
	font-weight: bold;
	border-radius: 20rpx;
	margin-right: 20rpx;
}
.sel-item.active{
	background-color: #fc8900;
	color: white;
}

17、图片间空隙

// 图片父元素/line-height决定
.content-five{
	font-size:0
}

18、按钮跳转

// 返回上一页
titleBack(){
	wx.navigateBack();
},

// 跳转到tabbar页面
titleBack(){
	wx.switchTab({
	     url: '/pages/index/index',
	})
},

// 跳转到页面
titleBack(){
	wx.wx.navigateTo({
	     url: '/pages/index/index',
	})
},

19、加入购物车

//页面显示时读取
onShow() {
   const value = uni.getStorageSync('cart_key');//同步获取
   if(value){			   
	   this.cartArr=value
	   wx.setTabBarBadge({      //tabbar设置角标
	   	index: 2,
	   	text: String(value.length),   //角标为字符串
	   })
   }
}

// 按钮点击
addCart(id) {
	let arr=this.cartArr
	addToCart(id,arr)  // 封装函数
}

//封装函数
export function addToCart(id,arr){
	if(arr.length==0){
		arr.push({product_id: id,})
		uni.setStorage({
			key: 'cart_key',
			data: arr,
			success: function() {
				wx.setTabBarBadge({
					index: 2,
					text: String(arr.length),
				})
				wx.showToast({
					title: '成功加入购物车',
					icon: 'success',
					duration: 2000
				})
			}
		});
	}else{
		if(arr.some(item=>{
			return item.product_id==id
		})){
			wx.showToast({
				title: '购物车中已存在',
				icon: 'error',
				duration: 2000
			})
		}else{
			arr.push({product_id: id,})
			uni.setStorage({
				key: 'cart_key',
				data: arr,
				success: function() {
					wx.setTabBarBadge({
						index: 2,
						text: String(arr.length),
					})
					wx.showToast({
						title: '成功加入购物车',
						icon: 'success',
						duration: 2000
					})
				}
			});
		}
	}
}