分类
小程序

详解封装微信小程序组件及小程序坑(附带解决方案)

一、序

  上一篇介绍了如何从零开发微信小程序,这篇介绍一下组件封装和我的踩坑历程。

二、封装微信小程序可复用组件

  首先模块化的思想是通用的,在这不做过多解释了。直接上代码,然后解释代码:

复制代码
// wxml
<view class="c-menu">
  <view wx:for="{{menuList}}" wx:key="{{item}}" class="menuItem">
    <navigator url="/pages/my{{item.path}}" class="navigator">
      <image class="imgIcon" src="{{item.icon}}"></image>
      <view class="navigator-text" data-id="{{item.key}}" bindtap="handleMenuTap">{{item.name}}</view>
    </navigator>
    <image class="imgGo" src="../../image/youxiang.png"></image>
  </view>
</view>



// js
Component({
  properties: {
    menuList: {    // 菜单列表
      type: Array,
      value: [],
    },
    menuEvent: {    // 菜单点击的自定义事件名称
      type: String,
      value: '',
    },
  },
  data: {
  },
  ready: function () {

  },
  methods: {
    handleMenuTap:function () {
      const { menuEvent } = this.data
      if (menuEvent) this.triggerEvent(menuEvent, {})
    }
  }
})


//json 
{
  "component": true
}

//wxss
.c-menu{
  width: 100%;
  background-color: white;
  margin-top: 10px;
}
.menuItem{
  position: relative;
  box-sizing: border-box;
}
.navigator-text{
  padding-left: 65px;
}
.navigator{
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 60px;
  line-height: 60px;
  border-bottom: 2px solid #F7F7F7;
}
.imgGo{
  position: absolute;
  width: 18px;
  height: 18px;
  top: 22px;
  right: 15px;
}
.imgIcon{
 position: absolute;
 width: 29px;
 height: 29px;
 top: 15px;
 left: 18px;
}
复制代码

  首先介绍思路:

    这是一个简单菜单组件;输入菜单数据 menuList , 暴露出 菜单点击事件的回调  menuEvent。

  然后介绍一下小程序封装组件的特殊之处:

    1、json 配置文件需要配置   “component”: true  ,  表名这是个组件

    2、js 里面使用 Component({})方法构造组件

    3、properties  组件接收的属性在这里面声明,包括数据类型和默认值

    4、生命周期通常用 ready 代表其准备完毕。

  最后介绍一下组件使用的方法:

    1、在要用组件的json文件 

        "usingComponents": {
          "menu": "/components/menu/index"
         }
    2、在wxml里面使用,并准备好组件需要的数据
        <menu menuList="{{menuList}}"></menu>
  
  这就是微信小程序封装组件的大致流程。大同小异,只是给大家说一下他特殊的地方而已

三、小程序的坑——小程序与其他web应用的不同之处     ps: 这里只描述问题,并提供解决问题的方法,详细的了解请查官方文档

  1、问题: map 等原生组件的覆盖问题。 在小程序里面,原生组件默认展示层级最该,也就是video、map等组件会覆盖我们的标签,即便是定位调节 z-index 什么的都没用

     解决:用  cover-view   cover-image  包裹内容,就可以覆盖在原生组件之上了。注意 这2个标签内容不能嵌套view等标签,具体使用,请看官方文档。

  2、问题:wxss 无法使用本地资源,即 background-image 不能直接使用相对路径展示图片。

     解决:将图片转成base64展示,或者不使用背景图,直接使用图片。例: background-image: url(“base64: …….”)

  3、问题:大多数 js 插件无法使用

     原因:小程序用的是不完整的浏览器对象,大多数 BOM  DOM 对象的api无法使用,故:没办法的事情

  4、问题:使用npm包费劲

     解决:请看我上一篇博客,详解微信小程序开发

  5、问题:只支持到ES6,不支持ES7。像 async 等这些东西都用不了。

     解决:这个比较蛋疼了。(1)这里只提供解决的思路。引入 regenerator 这个包 ,或者其他包都行。(2)开发环境自己搭建gulp打包环境,自己把js代码转ES5,注意关闭小程序自带的转换。

  6、问题:获取用户信息改版了,wx.authorize 等api不好使

     解决:现在必须用button按钮  <button open-type=”getUserInfo” bindgetuserinfo=”sweepCode”>扫码</button>

  7、问题:wx.request 请求,无法携带cookie,或者每次请求携带的都不一样,而且不同版本开发者工具设置cookie的报文字段不同

     解决:

复制代码
        header: {
              'content-type': 'application/json',
              'cookie': wx.getStorageSync("cookie")
            },
            success: function (res) {
             
                if (url === '/api/cdz/user/weixin/login') {
                  const cookie = res.header["set-cookie"] || res.header["Set-Cookie"];
                  if (cookie) wx.setStorageSync("cookie", cookie);
                }
                resolve(res.data);
            },
            fail: function (res) {
              // fail调用接口失败
              if (url === '/api/cdz/user/weixin/login') {
                const cookie = res.header["set-cookie"] || res,header["Set-Cookie"];
                if (cookie) wx.setStorageSync("cookie", cookie);
              }
              reject({ error: '网络错误', code: 0 });
            }    
复制代码

  8、问题:map 组件的使用,map是腾讯地图,和 百度、高德什么的,这些地图坐标系不同,经纬度的相互使用需要转化

     解决:用这个包  coordtransform 包很小,用法很简单

  9、问题:小程序伪类 :active  不支持

     解决:view、button、navigator 这3个支持 hover-class 属性,用法和 active 一样

  10、问题:上述问题,平时好用,但是如果按钮在原生组件上面的话,又不好使了

     解决:cover-view 无法嵌套普通标签。他又不支持 hover-class,所以只能js+wxss,自己写按钮激活事件了

  11、问题:小程序的事件点击不允许传参数。GoMy无法像vue react之类的一样写箭头函数直接传参

      <cover-view class="myCover" data-id="my" bindtap="goMy"></cover-view>

       解决:通过data-id这个属性绑定关键参数,触发函数再去取出来

  以上就是我遇到的一些问题,后序再有,会再补充

发表评论

电子邮件地址不会被公开。 必填项已用*标注