uniapp制作购物小程序学习笔记

环境搭建

​
下载安装HBuilderX软件DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架

下载安装微信开发者工具微信开发者工具下载地址与更新日志 | 微信开放文档 (qq.com)

注意在运行微信开发者工具时需要在manifest.json中配置appid

程序需要使用到接口文档ShowDoc

首页知识要点

如何制作轮播图

实现代码

 <template>
	<view>

		<swiper :indicator-dots="true" :autoplay="true" :interval="3500" :duration="1000" :circular="true">
			<swiper-item v-for="(item, i) in swiperList" :key="i">
				<view class="swiper-item">
					<image :src="item.image_src"></image>
				</view>
			</swiper-item>
		</swiper>
</view>
		
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [],
			}
		},
		onLoad() {
			this.getSwiperList()
		},
		methods: {
			async getSwiperList() {
				const res = await this.$Https({
					url: '/home/swiperdata'
				})
				// console.log(res);
				this.swiperList = res.message;
			},

		}

分类页知识要点

实现下拉刷新

<scroll-view scroll-y="true" class="left-scroll-view" :style="{height:winh+'px'}">
					<view class="left-view" :class="index == active ? 'active' : '' " v-for="(item,index) in leftview"
						:key="index" @tap="ChangedIndex(index)">
						<text>{
  {item}}</text>	
					</view>
				</scroll-view>

跳转到商品列表页 navigator :url

实现代码

<navigator v-for="(item2,index2) in item.children" :key="index2"
							:url="'../../subpkg1/goods-list/goods-list?cid='+item2.cat_id">
							<image :src="item2.cat_icon"></image>
							<text>{
  {item2.cat_name}}</text>
						</navigator>

商品列表页知识要点

下滑加载数据和下滑到底部提示

实现代码

onLoad(e) {
			this.queryParam.cid = e.cid;
			this.getGoodsList();
		},
		onReachBottom() {
			if (this.queryParam.pagenum >= this.totalPageCount) return uni.showToast({
				title: '我是有底线的'
			})
			if (this.isloading) return;
			this.queryParam.pagenum++;
			this.getGoodsList();
		},
		
		onPullDownRefresh() { 
			this.goodsList = [];
			this.queryParam.pagenum = 1;
			setTimeout(() => {
				this.getGoodsList(() => uni.stopPullDownRefresh());
			}, 1000)
		},
		methods: {
			handleTabsChange(aid) {
				this.tabsList.forEach(v => v.id == aid ? v.isActi