欢迎来到本网站

全国统一咨询热线:158-2196-7367

新闻中心

新闻中心News Center

联系方式

联系方式Contact infoemation

电话:158-2196-7367

邮箱:qiang.zhang@163.net

地址:中国·上海市金山区朱泾镇南横街4号4幢1296室H座

当前位置:明翔网络 > 新闻中心 > 详解封装微信小程序组件及小程序坑(附带解决方案)

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

文章出处:http://www.ucunicom.com/a/254.html 阅读量:109 发表时间:04-19 08:40
新闻中心

一、序

上一篇介绍了如何从零开发微信小程序,博客园审核变智障了,每次代码都不算篇幅,好好滴一篇原创,不到3分钟从首页移出来了。这篇介绍一下组件封装和我的踩坑历程。

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

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

// 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(http://www.ucunicom.com/"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,或者每次请求携带的都不一样

解决:

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"];
 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"];
 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这个属性绑定关键参数,触发函数再去取出来

全国咨询热线:158-2196-7367

二维码

地址:中国·上海市金山区朱泾镇南横街4号4幢1296室H座

版权所有 © 1999-2017 Copyright © 1999-2017 All Rights Reserved

cache
Processed in 0.005126 Second.