微信小程序项目总结（微信小程序传参方法，微信小程序三级联动，项目总结）

小程序学习笔记

1，微信小程序的传参方法

// 或者在wx.js里用wx.navigateToxi
//页面跳转传参
wx.navigateTo({
  url: '/pages/detail/detail?productId=12345'
})

如果传参的话参数不能是对象,如果需要传对象,可以将对象转成json字符串,然后拼接到url后面,在接收页面再将json字符串转成对象

let info = {
 a:2,
 b:3
}
let infoStr = JSON.stringfy(info);
wx.navigateTo({
  url: '/pages/detail/detail?infoStr='+infoStr
})

产品详情页

Page({
  onLoad: function(option){
    let infoStr = option.infoStr;
    let info = JSON.parse(infoStr);
  }
})

2，微信小程序的地区三级分类

这个是自己在项目中遇到的问题 自己在当时也是比较懵的，问了一下同学后学习了方法 自己又写了一遍 总结下 方便下次的学习

sbq_user_addaddress.wxml：(页面代码)

因为这个小程序的样式所需 它是开始只有一个省的选择 选择了省后会出来市的，选择市的会选择县的 所以 我给 后面的两个加上了判断事件，

在这里用的地址选择是vant组件 所以他的改变事件用了vant的事件

<view>
	<view class="sbp_address" wx:if="{{topshow}}">
		<van-cell title-class="title" title="微信收货地址" is-link />
	</view>

	<view catchtap="showPopup" data-type="sheng">
		<van-cell title="省份" is-link value="{{sheng}}" />
	</view>
	<view catchtap="showPopup" data-type="shi" hidden="{{sheng=='请选择'}}">
		<van-cell title="市区" is-link value="{{shi}}" />
	</view>
	<view catchtap="showPopup" data-type="xian" hidden="{{shi=='请选择'}}">
		<van-cell title="县村" is-link value="{{xian}}" />
	</view>
	<!-- 弹一 -->
	<van-popup show="{{ show }}" position="bottom" bind:close="onClose">
		<van-nav-bar title="{{sheng}}" left-text="返回" right-text="确定" bind:click-left="onClickLeft" bind:click-right="onClickRight" />
		<van-picker columns="{{ list }}" bind:change="onChange" />
	</van-popup>
</view>

接下来就是js代码：

开始在页面中的只是有一个省的选择器

所以我们要先从这个选择器开始

注：//：“//”用来区分不同方法
	//：“-------------”用来区分同一方法不同的处理方式

    data: {
    show: false,
    list: [],//全部列表
    one: "请选择",
    oneId: "",
    sheng: "请选择",//暂存省
    shengId: "",//暂存省Id,
    shi: "请选择",//暂存市
    shiId: "",//暂存市Id
    xian: "请选择",//暂存县
    xianId: "",//暂存县Id
    select: "",//判断点击状态,
  },
    /
    //点击选项栏执行
 showPopup(e) {
    if (e.currentTarget.dataset.type == "sheng") {//解释下为什么要进行判断：
    //进行判断是因为 我的这个省 市 和 县 的点击事件都是一个 我需要传值进行判断 
      //保存状态 是为了 后边点击 每个确定事件进行区分
      this.setData({
        select: "sheng"
      })
      //通过封装的API请求 来请求关于省的数据
      sbq_api("getsheng_list", {}, "GET", false).then(res => {
        let list = res.data
        //因为vant的组件中渲染比较特殊 只能渲染text不能用name
        //所以这里 用了遍历 给每个都加上一个text属性值 值为name
        list.map(res => {
          res.text = res.name
        })
        //业务需求 在拿来的数组上的前追加上text
        list.unshift({
          text: "请选择"
        })
        //保存当前省的列表
        this.setData({
          list
        })
      })
    }
   
   
   ——————————————————————————————————————————————————————————————————————————————
   
   
   //老规矩进入页面进行判断 是点击的那个 选项框
       if (e.currentTarget.dataset.type == "shi") {
      //保存状态 方便点击确认按钮保存数据
      this.setData({
        select: "shi"
      })
         //因为接口原因 这里的市需要获取的参数需要省的id
      let pid = this.data.shengId
      //获取当前的 市 的列表
      sbq_api("getshi_list", { pid }, "GET", false).then(res => {
        //遍历 添加text 上边有解释
        let list = res.data
        list.map(res => {
          res.text = res.name
        })
        //添加 请选择 
        list.unshift({
          text: "请选择"
        })
        //把list中的省的数据置换为市的
        this.setData({
          list: res.data
        })
        //用户滑动选择器 触发ohChange事件 并对选的数据进行了暂存 再次确定 执行到确定事件中
      })
    }
   
   ——————————————————————————————————————————————————————————————————————————————
   
   
   //进行判断用户点击的是哪个选项框
       if (e.currentTarget.dataset.type == "xian") {
      //记录点击状态 
      this.setData({
        select: "xian"
      })
         //接口原因 需要传递市的id来拿到省的数据
      let pid = this.data.shiId
      //调用接口拿到数据
      sbq_api("getshi_list", { pid }, "GET", false).then(res => {
        let list = res.data
        //遍历添加text
        list.map(res => {
          res.text = res.name
        })
        //添加请选择这一项
        list.unshift({
          text: "请选择"
        })
        //把市的数据替换掉
        this.setData({
          list: res.data
        })
        //用户这时候就开始滑动选项栏了 执行滑动选项的方法 保存选中的县 为暂存值 点击确定 执行确定的方法
      })
    }
       this.setData({ show: true });//关闭选项框
   }

//

  //滑动选项栏执行（共用的一个选择器）
  onChange(event) {
    this.setData({
      //这里用了一个one和oneId来进行了选择值的暂存
      one: event.detail.value.text,
      oneId: event.detail.value.id,
    })
  },
    //
    //点击滑动栏中的确定执行
    onClickRight() {
      //关闭弹出的滑动选项卡
      this.onClose()
      //利用了上边保存的select 当前点击的是省的 所以select就是sheng
      //这时候点击了确定先判断 把暂存值给到 自己要渲染和保存的值中
   if (this.data.select == "sheng") {
      this.setData({
        sheng: this.data.one,
        shengId: this.data.oneId
      })
    }
      //这时候 省里面 已经有东西了 所以 市的 选项框也就出现了
      //让我们回到 点击 市选项框 的那一步↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
      
      
      
——————————————————————————————————————————————————————————————————————————————
      
      
      //好啦 刚才已经选择好了 市 点击了确定 
      //通过刚才状态的保存得知了 现在的状态是市了
          if (this.data.select == "shi") {
       //把市的数据保存并且渲染到页面
      this.setData({
        shi: this.data.one,
        shiId: this.data.oneId
      })
        //市中有了数据后 县的选项框也就出来了
        //让我们回到 点击 县选项框 的那一步↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
    }
      
      
      ————————————————————————————————————————————————————————————————————————————
      
      
      //判断状态这时候点确定的是县
          if (this.data.select == "xian") {
            //把暂存进行保存 渲染
      this.setData({
        xian: this.data.one,
        xianId: this.data.oneId
      })
        //所有数据获取完毕
    }
    }

3，项目完成总结

今天下午 后两节在教室面 评选了 各组的项目 微信小程序的项目 也就是到今天就结束了 经历了 不长不短的一个星期 的努力 虽然没有在规定的时间段全部完成，一些细节上的东西还是不够完善，但那是我觉得 自己已经按照自己的思想 和 写法完成了 也就是自己的代码了 现在 就是把自己在敲代码中 自己一些缺点进行总结 再下次项目的时候避免进入这些坑

• 敲码速度的问题

这个微信小程序 可能是新学习的语言的原因自己敲码 开始并没有那么快 遇到自己不会的 还要去查文档 百度 导致了前期敲的慢 这种问题呢 就是 在下个项目中vue中应该不会出现

• 对原生js代码理解不够深入

这个问题主要就是在自己封装API网络模块的和用户页面的登录中显示出来了，首先是在API模块的封装中自己对一个 API请求参数的设置错误 还有 没有了解API返回code码就进行判断导致了 组内成员拿不到返回数据的错误 最后在老师的帮助下才解决了问题 ， 归根结底还是自己JS薄弱 以后 一定自己先写个 模板 自己试验下 简化模块 再使用，用户页面的登录呢也是因为不理解async/await的作用（现在理解了）导致自己没有正确处理好异步和同步的问题 这个 在下个项目中要注意

• 对组件的封装还需要巩固

这个项目是第一个团体合作的项目 所以 对于模块和组件的开发并不是太理解 这个问题也是需要下去再进行学习 感觉 还是要分清以下 模块 和 组件的 区别 因为 整个项目中没有 模块的 封装 只是用的 组件 下去了 还是要 多练练 模块

总的来说这个项目自己也是努力了 了解到了团队协作的重要新 提前也是体验了以下合作开发 虽然评比结果不尽人意 但是 知识是学到了自己的脑子里了

一个星期来说 多多反思 自己在敲码中的不足 好好 利用到下次的项目中