怎样完成一个微信小程序项目

现在是特殊时期，但是进步无止境，我们的战斗就永不停息。这种不断战胜困难和自己的战斗就是逆战。本篇是在了解了一些微信小程序开发后，用uni-app开发的一个商城类小程序项目。

1.创建及运行项目

可以参考网址 https://uniapp.dcloud.io/quickstart?id=%e5%88%9b%e5%bb%bauni-app官网中推荐了两种，个人觉得第一种比较简单

2.全局配置

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

它类似微信小程序中app.json的页面管理部分。注意定位权限申请等原属于app.json的内容，在uni-app中是在manifest中配置

属性	类型	必填	描述	平台兼容
globalStyle	Object	否	设置默认页面的窗口表现
pages	Object Array	是	设置页面路径及窗口表现
easycom	Object	否	组件自动引入规则	2.5.0+
tabBar	Object	否	设置底部 tab 的表现
condition	Object	否	启动模式配置
subPackages	Object Array	否	分包加载配置
preloadRule	Object	否	分包预下载规则	微信小程序
workers	String	否	Worker 代码放置的目录	微信小程序

3. 以下是项目中pages.json的代码

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    {
      "path" : "pages/home/home",
      "style" : {
        "navigationBarTitleText": "嗨购-首页",
        "enablePullDownRefresh": true
      }
    },
		{
			"path": "pages/index/index",
			"style": {
			}
    },
    {
      "path" : "pages/kind/kind",
      "style" : {
        "navigationBarTitleText": "嗨购-分类"
      }
    },
    {
      "path" : "pages/cart/cart",
      "style" : {
        "navigationBarTitleText": "嗨购-购物车"
      }
    },
    {
      "path" : "pages/user/user",
      "style" : {
        "navigationBarTitleText": "嗨购-我的"
      }
    },
    {
      "path" : "pages/detail/detail",
      "style" : {}
    }
      ,{
            "path" : "pages/login/login",
            "style" : {}
        }
        ,{
            "path" : "pages/register/register",
            "style" : {}
        }
    ],
	"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "嗨购",
		"navigationBarBackgroundColor": "#ff6666",
		"backgroundColor": "#F8F8F8"
	},
  "tabBar": {
    "color": "#333",
    "selectedColor": "#f66",
    "backgroundColor": "#efefef",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "static/resources/home.png",
        "selectedIconPath": "static/resources/home_active.png"
      },
      {
        "pagePath": "pages/kind/kind",
        "text": "分类",
        "iconPath": "static/resources/kind.png",
        "selectedIconPath": "static/resources/kind_active.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "static/resources/cart.png",
        "selectedIconPath": "static/resources/cart_active.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的",
        "iconPath": "static/resources/user.png",
        "selectedIconPath": "static/resources/user_active.png"
      }
    ]
  },
  "condition": { //模式配置，仅开发期间生效  ---- 设置小程序的编译模式
    "current": 0, //当前激活的模式（list 的索引项）
    "list": [{
      "name": "首页",
      "path": "pages/home/home"
    },{
      "name": "分类",
      "path": "pages/kind/kind"
    },{
      "name": "购物车",
      "path": "pages/cart/cart"
    },{
      "name": "我的",
      "path": "pages/user/user"
    },{
      "name": "登陆",
      "path": "pages/login/login"
    }]
  }
}

4.uni-app中的生命周期

应用生命周期

函数名	说明
onLaunch	当uni-app 初始化完成时触发（全局只触发一次）
onShow	当 uni-app 启动，或从后台进入前台显示
onHide	当 uni-app 从前台进入后台
onError	当 uni-app 报错时触发
onUniNViewMessage	对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯

页面生命周期

函数名	说明	平台差异说明	最低版本
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化	App、微信小程序
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新，参考示例
onReachBottom	页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项
onTabItemTap	点击 tab 时触发，参数为Object，具体见下方注意事项	微信小程序、支付宝小程序、百度小程序、H5、App（自定义组件模式）
onShareAppMessage	用户点击右上角分享	微信小程序、百度小程序、头条小程序、支付宝小程序
onPageScroll	监听页面滚动，参数为Object	nvue暂不支持
onNavigationBarButtonTap	监听原生标题栏按钮点击事件，参数为Object	App、H5
onBackPress	监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；详细说明及使用：onBackPress 详解	app、H5、支付宝小程序
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件	App、H5	1.6.0
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。	App、H5	1.6.0
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件	App、H5	1.6.0

组件生命周期

函数名	说明	平台差异说明	最低版本
beforeCreate	在实例初始化之后被调用。详见
created	在实例创建完成后被立即调用。详见
beforeMount	在挂载开始之前被调用。详见
mounted	挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档
beforeUpdate	数据更新时调用，发生在虚拟 DOM 打补丁之前。详见	仅H5平台支持
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见	仅H5平台支持
beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用。详见
destroyed	Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。详见

### 5.实现首页轮播图，商品列表

（轮播图状态、生命周期钩子中请求数据、修改状态、渲染数据）

<swiper :indicator-dots="true" :autoplay="true" :circular="true">
      <swiper-item v-for="(item, index) of bannerlist" :key="index">
        <image :lazy-load="true" mode="aspectFit"  :src="'http://daxun.kuboy.top' + item" ></image>
      </swiper-item>
</swiper>
<prolist :prolist="prolist"/>//
<view class="tip" v-if="flag">没有更多数据了</view>
<view class="iconfont" @click="backtop">↑</view>

 import prolist from '../../components/prolist/prolist.vue'
  import { request } from '../../utils/index.js'
	export default {
		data() {
			return {
				bannerlist: [],
        prolist: [],
        pageCode: 1,
        flag: false // 表示有无数据的标识
			}
		},
    components: {
      prolist
    },
    mounted () {
      request({
        url: '/pro/banner'
      }).then(res => {
        console.log(res.data)
        this.bannerlist = res.data.data
      })
      request({
        url: '/pro'
      }).then(res => {
        console.log(res.data)
        this.prolist = res.data.data
      })
    },
    onPullDownRefresh () { // 下拉刷新
      console.log('下拉刷新')
      request({
        url: '/pro'
      }).then(res => {
        console.log(res.data)
        this.prolist = res.data.data
        this.pageCode = 1 // 重置页码
        this.flag = false // 有无数据标识隐藏
        // 当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。
        uni.stopPullDownRefresh()
      })
    },
    onReachBottom () { // 上拉加载
      request({
        url: '/pro',
        data: {
          pageCode: this.pageCode,
          limitNum: 10
        }
      }).then(res => {
        this.pageCode++
        if (res.data.code === '10000') {
          this.flag = true
        } else {
          this.prolist = [...this.prolist, ...res.data.data]
        }
      })
    },
		methods: {
			backtop () {
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 200
        })
      }
		}
	}

6.封装请求 utils/index.js

const baseUrl = "http://xxx.xxx"

export function request (options) {
  const { url, method, data, header } = options
  uni.showLoading({
      title: '加载中'
  });
  return new Promise((resolve, reject) => {
    uni.request({
      url: baseUrl + url,
      data: data || {},
      method: method || 'GET',
      header: header || {},
      timeout: 6000, // 请求超时时间设置
      success: (res) => {
        resolve(res)
      },
      fail: (err) => {
        reject(err)
      },
      complete: () => {
        uni.hideLoading()
      }
    })
  })
}

export function toast (options) {
  const { title, icon, duration } = options
  uni.showToast({
    title: title,
    icon: icon || 'none',
    duration: duration || 5000
  })
}

7.自定义组件components/prolist/prolist

 <view @click="toDetail(item.proid)" class="proitem" v-for="(item, index) of prolist" :key="index">
      <view class="itemimg">
        <image :src="item.proimg" mode=""></image>
      </view>
      <view class="iteminfo">
        <view class="title">{{ item.proname }}</view>
      </view>
    </view>
export default {
    // props: ['prolist'],
    props: {
      // prolist: Array
      prolist: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
		data() {
			return {
			};
		},
    methods: {
      toDetail (proid) {
        uni.navigateTo({
          url: '/pages/detail/detail?proid=' + proid
        })
      }
    }
	}

8.登录

<view>
		<input type="text" v-model="tel" /> 
    <text :class="tel.length !== 11 ? 'error' : 'success'">{{ teltip }}</text>
    <input type="text" v-model="password">
    <text :class="password.length < 6 ? 'error' : 'success'">{{ passwordtip }}</text>
    <button 
    :disabled="tel.length !== 11 || password.length < 6"
    :type="tel.length === 11 && password.length >= 6 ? 'warn' : 'default'"
    @click="login"
    >登陆</button>
</view>

import { request, toast } from '../../utils/index.js'
	export default {
		data() {
			return {
				tel: '18813007814',
        password: '123456'
			}
		},
    computed: {
      teltip () {
        if (this.tel.length !== 11) {
          return '手机号码格式不正确'
        } else {
          return '手机号码ok'
        }
      },
      passwordtip () {
        if (this.password.length < 6) {
          return '密码格式不正确'
        } else {
          return '密码ok'
        }
      }
    },
		methods: {
      // 上面进行过 表单的检验，此处可以直接提交数据
			login () {
        request({
          url: '/users/login',
          method: 'POST',
          data: {
            tel: this.tel,
            password: this.password
          }
        }).then(res => {
          console.log(res.data)
          const { code } = res.data
          if (code === '10006') {
            toast({title: '该用户还未注册'})
          } else if (code === '10007') {
            toast({title: '密码错误'})
          } else {
            // 登陆成功
            toast({title: '登陆成功'})
            try {
              uni.setStorageSync('token', res.data.data.token)
              uni.setStorageSync('userid', res.data.data.userid)
              uni.navigateBack()
            } catch (e) {
              console.log(e)
            }
          }
        })
      }
		}
	}

9.加入购物车

<view>
    <image :src="proimg" mode=""></image>
		<view>{{proname}}</view>
		<view>{{price}}</view>
    <button @click="addCart">加入购物车</button>
</view>

import { request, toast } from '../../utils/index.js'
	export default {
		data() {
			return {
				proname: '',
        proid: '',
        proimg: '',
        price: 0
			}
		},
    onLoad (options) {
       // console.log(options)
       const { proid } = options
       request({
         url:  `/pro/detail?proid=${proid}`
       }).then(res => {
         console.log(res.data.data)
         const { proname, proimg, price } = res.data.data
         this.proname = proname
         this.proimg = proimg
         this.price = price
         this.proid = proid
         uni.setNavigationBarTitle({
           title: proname
         })
       })
    },
		methods: {
			addCart () {
        // 获取本地存储的信息 token  userid
        try {
          const token = uni.getStorageSync('token');
          const userid = uni.getStorageSync('userid');
          if (token && userid) { // 前端校验登陆
              // 加入购物车判断用户是不是登陆状态 ---- 登陆   ----  继续加入购物车
              request({
                url: '/cart/add',
                method: 'POST',
                data: {
                  token, userid, num: 1, proid: this.proid
                }
              }).then(res => {
                if (res.data.code === '10119') { // 后端校验登陆状态
                  toast({title:'请先登录'})
                  uni.navigateTo({
                    url: '/pages/login/login'
                  })
                } else {
                  toast({title:'加入购物车成功'})
                }
              })
          } else {
            toast({title:'请先登录'})
            uni.navigateTo({
              url: '/pages/login/login'
            })
          }
        } catch (e) {
            // error
        }
      }
		}
	}

10.购物车

<template>
	<view>
		<view v-if="flag">
			购物车空空如也，请<navigator open-type="switchTab" url="/pages/home/home">选购</navigator>
		</view>
		<view v-else>
			<view class="cartlist">
				<view class="cartitem" v-for="(item,index) of cartlist" :key="index">
					<checkbox-group @change="selected(item)">
						<checkbox :checked="item.flag"></checkbox>
					</checkbox-group>
					<image :src="item.proimg"></image>
					<text>{{item.proname}}</text>
					<text>￥{{item.price}}</text>
					<text @click="reduce(item)">-</text>
					{{item.num}}
					<text @click="add(item)">+</text>
					<text @click="del(item,index)">删除</text>
				</view>
			</view>
		</view>
		<checkbox-group @change="allselected">
			<checkbox :checked="allchecked">全选</checkbox>
		</checkbox-group>
		<view>总数：{{totalNum}}</view>
		<view>总价：{{totalPrice}}</view>
	</view>
</template>

<script>
	import {request,toast} from '../../utils/index.js'
	export default {
		data() {
			return {
				flag:true,
				cartlist:[],
				allchecked:true
			}
		},
		computed:{
			totalNum(){
				let totalNum = 0
				this.cartlist.map(item =>{
					item.flag?totalNum += item.num :totalNum += 0
				})
				return totalNum
			},
			totalPrice(){
				let totalPrice = 0;
				this.cartlist.map(item =>{
					item.flag ? totalPrice += item.num*item.price : totalPrice += 0
				})
				return totalPrice
			}
		},
		onLoad() {
			console.log('onLoad')
		},
		//不使用onLoad以及mounted是因为页面被缓存，数据更新不及时
		onShow() {
			console.log('onShow')
			try{
				let userid = uni.getStorageSync('userid')
				let token = uni.getStorageSync('token')
				if(userid && token){
					request({
						url:'/cart',
						data:{
							userid,
							token
						}
					}).then(res=>{
						if(res.data.code === '10019'){
							toast({title:'请先登录'})
							uni.navigateTo({
								url:'/pages/login/login'
							})
						}else if(res.data.code === '10012'){
							toast({title:'请先选购商品'})
							this.flag = true
						}else{
							toast({title:'购物车列表获取成功'})
							this.flag = false
							//赋值之前给数据添加数据项 item.flag
							res.data.data.map(item=>{
								item.flag = true
							})
							this.cartlist = res.data.data
							console.log(this.cartlist)
						}
					})
				}else{
					toast({title:'请先登录'})
					uni.navigateTo({
						url:'/pages/login/login'
					})
				}
			}catch(e){
				//TODO handle the exception
			}
		},
		methods: {
			allselected(){
				this.allchecked = ! this.allchecked
				console.log(this.allchecked)
				//如果为真，修改数据的每一项的flag的值都为真，否则都为假
				if(this.allchecked){
					this.cartlist.map(item =>{
						item.flag = true
					})
				}else{
					this.cartlist.map(item=>{
						item.flag = false
					})
				}
			},
			selected(item){
				console.log('test',item)
				item.flag = !item.flag
				console.log(this.cartlist)
				//如果单独某一项没被选中，那么全选一定不被选中
				//如果单独某一项被选中了，检测其他项是否都被选中，如果都被选中了，全选被选中
				if(!item.flag){
					this.allchecked = false
				}else{
					//检测某余项是否被选中 -- 一假则假
					const test = this.cartlist.every(item=>{
						return item.flag === true
					})
					if(test){
						this.allchecked = true
					}else{
						this.allchecked = false
					}
				}
			},
			reduce(item){
			//如果当前的个数为1不操作，如果大于1减1操作
				let num = item.num
				if(num>1){
					num -= 1
				}else{
					num = 1
				}
				let token = uni.getStorageSync('token')
				request({
					url:'/cart/update',
					data:{
						token,
						cartid:item.cartid,//item包含购物车记录id
						num
					}
				}).then(res=>{
					if(res.data.code === '10019'){
						toast({title:'请先登录'})
						uni.navigateTo({
							url:'/pages/login/login'
						})
					}else{
						toast({title:'修改数量成功'})
						item.num = 1//服务器返回成功之后 试图才更新
					}
				})
			},
			add(item){
			//如果当前的个数为1不操作，如果大于1减1操作
				let num = item.num
				num += 1
				let token = uni.getStorageSync('token')
				request({
					url:'/cart/update',
					data:{
						token,
						cartid:item.cartid,//item包含购物车记录id
						num
					}
				}).then(res=>{
					if(res.data.code === '10019'){
						toast({title:'请先登录'})
						uni.navigateTo({
							url:'/pages/login/login'
						})
					}else{
						toast({title:'修改数量成功'})
						item.num += 1//服务器返回成功之后 试图才更新
					}
				})
			},
			del(item,index){
				let token = uni.getStorageSync('token')
				request({
					url:'/cart/delete',
					data:{
						token,
						cartid:item.cartid
					}
				}).then(res=>{
					if(res.data.code === '10019'){
						toast({title:'请先登录'})
						uni.navigateTo({
							url:'/pages/login/login'
						})
					}else{
						toast({title:'删除数据成功'})
						this.cartlist.splice(index,1)//删除当前的数据
						//如果点击删除，删完之后要显示没有数据了
						this.cartlist.length === 0 ? this.flag = true : this.flag = false
					}
				})
			}
		}
	}
</script>

<style>
	.cartlist image{
		width: 100px;
		height: 100px;
	}

</style>