一、序

  上一篇介绍了如何从零开发微信小程序,博客园审核变智障了,每次代码都不算篇幅,好好滴一篇原创,不到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("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这个属性绑定关键参数,触发函数再去取出来

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

详解封装微信小程序组件及小程序坑(附带解决方案)的更多相关文章

  1. 详解Android中的四大组件之一:Activity详解

    activity的生命周期 activity的四种状态 running:正在运行,处于活动状态,用户可以点击屏幕,是将activity处于栈顶的状态. paused:暂停,处于失去焦点的时候,处于pa ...

  2. vue 源码详解(二): 组件生命周期初始化、事件系统初始化

    vue 源码详解(二): 组件生命周期初始化.事件系统初始化 上一篇文章 生成 Vue 实例前的准备工作 讲解了实例化前的准备工作, 接下来我们继续看, 我们调用 new Vue() 的时候, 其内部 ...

  3. Tomcat负载均衡、调优核心应用进阶学习笔记(一):tomcat文件目录、页面、架构组件详解、tomcat运行方式、组件介绍、tomcat管理

    文章目录 tomcat文件目录 bin conf lib logs temp webapps work 页面 架构组件详解 tomcat运行方式 组件介绍 tomcat管理 tomcat文件目录 ➜ ...

  4. Intent对象详解——使用Intent启动系统组件

    Android的应用程序包含三种重要组件:Activity.Service.BroadcastReceiver,应用程序采用一致的方式来启动它们——都是依靠Intent来启动的,Intent就封装了程 ...

  5. 详解Bootstrap下拉菜单组件

    bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,他对应的文件: less 对应的源码文件为:dropdowns.less sass对应的源码文件为:_dropdowns.scs ...

  6. 壹度DIY_微信小程序组件_小程序插件开发

    开源免费插件,diy特有的页面机制,搭配30+自定义组件,让你的站点每一个页面都可以完全自定义,可无缝对接任意小程序,如有疑问加入qq壹度小程序交流群:302866773:或wx:liu2417301 ...

  7. 黄聪:详解申请微信h5支付方法,开通微信h5网页支付接口(转)

    版权声明:图文并茂的微信小程序教程!欢迎转载,请保留作者名字和链接:商业合作请联系子恒老师助理 QQ : 2334512685 https://blog.csdn.net/towtotow/artic ...

  8. 【转】详解使用tcpdump、wireshark对Android应用程序进行抓包并分析

    原文网址:http://blog.csdn.net/gebitan505/article/details/19044857 本文主要介绍如何使用tcpdump和wireshark对Android应用程 ...

  9. Vue中Vuex的详解与使用(简洁易懂的入门小实例)

    怎么安装 Vuex 我就不介绍了,官网上有 就是 npm install xxx 之类的.(其实就是懒~~~哈哈) 那么现在就开始正文部分了 众所周知 Vuex 是什么呢?是用来干嘛的呢? Vuex ...

随机推荐

  1. spring security 学习笔记

    官方文档

  2. day16——函数式编程和内置函数

    编程的方法论 面向过程:找到问题的 函数式:不可变.不用变量保存状态.不修改变量 面向对象: 高阶函数: 满足俩个特性任意一个即为高阶函数 1.函数的传入参数是一个函数名 2.函数的返回值是一个函数名 ...

  3. LightOJ 1348 (树链剖分 + 线段树(树状数组))

    题目 Link 分析 典型的树链剖分题, 树链剖分学习资料 Code #include <bits/stdc++.h> using namespace std; const int max ...

  4. Django Rest framework Swagger生成api文档

    关于swagger Swagger能成为最受欢迎的REST APIs文档生成工具之一,有以下几个原因: - Swagger 可以生成一个具有互动性的API控制台,开发者可以用来快速学习和尝试API. ...

  5. js-图片预加载

      //图片预加载 //闭包模拟局部作用于 (function($){ function Preload(imgs,options){ this.imgs = (typeof imgs === 'st ...

  6. 高可用Redis(五):瑞士军刀之慢查询,Pipeline和发布订阅

    1.慢查询 1.1 慢查询的生命周期 步骤一:client通过网络向Redis发送一条命令 步骤二:由于Redis是单线程应用,可以把Redis想像成一个队列,client执行的所有命令都在排队等着s ...

  7. vuex 收藏一个循序渐进,易懂易行的博客。

    https://www.jianshu.com/p/133d329c3702  记录--

  8. LoadRunner运行错误集

    1.error-27796错误解决方法: 在负载生成器的注册表HKEY_LOCAL_MACHINE/SYSTEM/CurrentControlSet/Services/Tcpip/Parameters ...

  9. 中位数——二维坐标下的中位数lightoj1349

    第一次碰到这种题,不知所措,题解链接 => https://www.cnblogs.com/fu3638/p/7426074.html #include<bits/stdc++.h> ...

  10. java获取application.properties和application.yml配置文件信息

    public static void main(String[] args) { String result=getProjectConfig("max-file-size"); ...