【微信小程序】第二篇:常见问题解决及常用技能方法

【微信小程序】第二篇:常见问题解决及常用技能方法

一、 常见问题解决

1. Cannot send network request to localhost

菜单栏→设置→项目设置

本地设置

2. button

2.1. 样式不生效

很多样式设置不生效,如无需用到button的特殊属性,使用改view作为button

2.2. button无法设置背景色

button设置的背景色只支持标签名 不要试图给button设置类名来改变背景色

3. 阻止遮罩层下的页面滚动

3.1. 第一种方式

利用position:fixed 禁止页面滚动

wxml

<view class="indexPage {{proInfoWindow?'indexFixed':''}}">
    <!--此处为整个页面的结构内容-->
    <button catchTap="_proInfoWindowShow">点击显示弹窗</button>
</view>
<!-- 当proInfoWindow为true的时候显示弹窗-->
<view wx:if="{{proInfoWindow}}">此处为弹窗内容</view>

wxss

//添加一个类名, 把弹窗的下层内容定位为fixed.实现禁止滚动的效果
.indexFixed{
  position: fixed;
  top:0;//top:0可不写,否则显示弹窗的同时会使底层滚动到顶部.
  left:0;
  bottom:0;
  right:0;
}

js

Page({
  data: {  
    proInfoWindow:false,//控制弹窗是否显示
      
  },
    // 点击弹窗事件, 设置proInfoWindow为true, 显示弹窗.
    // 设置proInfoWindow为true的同时, 给页面添加了一个class名为indexFixed的类.显示弹窗时下层就禁止滚动,关掉弹窗时就可以滚动.
  _proInfoWindowShow(){
      this.setData({
        proInfoWindow:true
    })
  }
})

3.2. 第二种方式 无 滑动scroll-view组件

用 catchtouchmove="return"

<!--此处为弹窗内容-->
<!--外层加 catchtouchmove="return"仅触摸背景区域时不穿透底部.-->
<view  catchtouchmove="return"> 
    <!--在每个小的区域内加 catchtouchmove="return"-->
    <view  catchtouchmove="return"></view> 
    <view> 
        <!--有需要滚动的列表区域位置不要加 catchtouchmove="return", 否则列表无法滚动-->
        <view>滚动列表1</view>
        <view>滚动列表2</view>
        <view>滚动列表3</view>
        <view>滚动列表4</view>
    </view>
</view>

应用案列


弹窗wxml

弹窗js

3.3. 有 滑动scroll-view组件

在弹出层下的页面根元素添加动态样式class：

<!-- isShowPopup变量确认是否展示弹窗的变量 -->
<view class="{{ isShowPopup ? 'stop-scroll' : '' }}">
    <!-- ... -->
</view>

/* *.wxss */
.stop-scroll {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

4. 出现 please do not register multiple Pages in undefined.js 错误

这多半是在 app.js里添加了Page（）。app.js是应用程序级别的不能用Page（），Page*（）只能用于页面的js文件中。app.js请使用App（）。

5. 使用background-image真机上无法显示图片？

background-image如果url指向的是一个网络图片，则真机可以显示。但如果url指向的是本地图片，则在模拟器里显示正常，iOS上无法显示图片。建议使用image.

6. 小程序中的换行问题

小程序中的数据展示如果有换行，需要满足两个条件

  • 数据 换行符 \n
  • 包含数据的盒子必须是<text>

7.小程序中的textarea

textarea是个让人头疼的东西，他是h5 原生的，没有东西可以定位到他的上面，我们想在它上面显示东西的时候只能先把他隐藏，
小程序的textarea和h5 的优点不一样，它的值显示在value属性中，而不是标签内

textarea show-confirm-bar=false 无效问题解决
去掉textarea上的完成按钮栏，每次输入换行时会遮挡住光标所在的输入行。使用show-confirm-bar=’false’竟然无效

解决办法

show-confirm-bar=''

二、常用技能方法

1. 获取用户openid以及userInfo,并插入mysql表中

首先,通过登录微信公众平台获取appid以及secret

image.png
wx.login({
  success: res => {
    // 发送 res.code 到后台换取 openId, sessionKey, unionId
    if (res.code) {
      //发起网络请求
      wx.request({
        url: 'https://api.weixin.qq.com/sns/jscode2session',//获取openid接口地址
        data: {
          appid: that.globalData.appid,
          secret: that.globalData.secret,
          js_code: res.code,
          grant_type:'authorization_code'
        },
        method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT  
        // header: {}, // 设置请求的 header  
        success: function(res) {
          that.globalData.openid = res.data.openid; //存储openid 
        }
      })
    } else {
      console.log('登录失败！' + res.errMsg)
    }
  }
})

2.使用 data-绑定值 动态传值

2.1. 获取

如 data-name,通过e.target.dataset.name 与 e.currentTarget.dataset.name来获取

2.2 target 与 currentTarget区别

参考网址:微信小程序之事件

事件分为冒泡事件和非冒泡事件
冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

e.currentTarget 当前组件的一些属性值集合(事件绑定的当前组件)
e.target 触发事件的组件的一些属性值集合(触发事件的源组件)

特殊事件： canvas 中的触摸事件不可冒泡，所以没有 currentTarget。

应用场景

<view id="tap1" bindtap="handleTap1">
  一级
  <view id="tap2" catchtap="handleTap2">
    二级
    <view id="tap3" bindtap="handleTap3">
      三级
    </view>
  </view>
</view>

说明：点击 三级 时，handleTap3 收到的事件对象 target 和 currentTarget 都是 tap3，而 handleTap2 收到的事件对象 target 就是 tap3，currentTarget 就是 tap2。

3. 小程序点击多个指定地方都能关闭弹框

wxml
js

4. 事件对象

4.1. Bind 冒泡阶段触发的事件

touchstart touchmove touchcancel touchend tap longtap

4.2. Catch 捕获阶段触发都事件

4.3. 事件中获取对应元素的参数

4.3.1. Wxml中用data给元素加参数

取值方法 e.currentTarget.dataset.参数名

  • 参数名用小写 大写会转为转为小写
  • 如果有横杠连接会被转为驼峰 msg-a -> msgA
4.3.2. 页面加载时获取连接参数的方法
Page({
        Onload(options){
        //参数都在options中
        }
})

4.4 Bindconfirm 捕获回车键

5. 缓存

6. 列表渲染

7. Template模板使用

7.1. 模板页

tem.wxml

<template name=”temName”>
  <view>这里写数据，data中的数据能传入进来</view>
</template>

tem.wxss

tem.js

//引用页添加方法
const a = ()=>{console.log(0)}
export {a}

7.2. 引用页

wxss

@import “./tem.wxss”// 样式引用

wxml

 <import src=”./tem.wxml” />
<!-- 在需要的地方写入 -->
 <template is=”temName”  data=”{{这里是需要传入的数据}}” />

js

import {a} from 'tem.js'
let index = {
        a,
        data:{
            msg:111
        }
    }
Page(index)

缓存问题,缓存如果未清除会一直存在 ，上限10m

 wx.setStorage({//设置缓存 默认是异步的
  key:"key",
  data:"value"
})

8. 通过使用wxs文件在wxml页面中调用JavaScript函数

8.1. 创建一个numbertofix.wxs文件，创建numberToFix函数

var filter = {
  numberToFix: function (value) {
    return value.toFixed(1)
  }
}
module.exports = {
  numberToFix: filter.numberToFix
}

8.2. 在需要使用numberToFix函数的页面引入numbertofix.wxs文件

<wxs module="filter" src="../../utils/numbertofix.wxs"></wxs>
<text class="vote-item-data-percent">{{filter.numberToFix(item.vote_count/vote.data.voters_count*100)}}%
</text>

9. 引用外部js

//封装的函数
function GetUserInfo2018() {
 console.log("获取用户信息8888")
}
  
function count(str) {
 console.log(str)
}
  
//转化成小程序模板语言 这一步非常重要 不然无法正确调用
module.exports = {
 GetUserInfo2018: GetUserInfo2018,
 count: count
};
  
/*其它页面调用
 var common = require("../common/common.js");
 common.GetUserInfo2018();
 common.count("hehe");
*/

10.引用外部样式

/*
app.wxss是全局样式，作用于每一个页面，
而page下的每一个的wxss文件只作用于当前页面，并对全局样式中的相同属性会覆盖 
*/
@import "../../app.wxss";
/**index.wxss**/
.userinfo {
 display: flex;
 flex-direction: column;
 align-items: center;
}
  
.userinfo-avatar {
 width: 128rpx;
 height: 128rpx;
 margin: 20rpx;
 border-radius: 20%;
}
  
.userinfo-nickname {
 color: #aaa;
}
  
.usermotto {
 margin-top: 200px;
}

11. 引用公共页面模板

11.1. 不带参数

首先在pages文件夹中新建一个template文件夹，文件夹中新建一个template.wxml文件，代码如下

<!--template.wxml-->
<template name="msgItem">
 <view>
  <text>This is template.wxml文件，我是一个模板</text>
 </view>
</template>

然后我们书写我们所要调用template的页面index.wxml

<!--index.wxml-->
<!-- 声明需要使用的模板文件 -->
<import src ="../template/template.wxml"/>
<template is="msgItem"/>

11.2. 带参数

首先，修改template.wxml文件，我们给模板添加三个字段，修改后代码如下

<template name="msgItem">
 <view>
  <text>This is template.wxml文件，我是一个模板</text>
  <view>
   <text> {{index}}: {{msg1}} </text>
   <text> {{msg2}} </text>
  </view>
 </view>
</template>

接下来我们在index.wxml中传递模板中所需要的三个参数，修改后的代码如下：

<!--index.wxml-->
<!-- 声明需要使用的模板文件 -->
<import src ="../template/template.wxml"/>
<view>This is index.wxml</view>
<template is="msgItem" data="{{index:1,msg1:'msg1数据',msg2:'msg2数据'}}"/>

11.3. 列表item模板

接下来我们就通过一种常见的情况列表数据来使用模板，增加对模板的认知，直接上修改过的代码：

<!--template.wxml-->
<template name="msgItem">
 <view>
  <text> name: {{name}} </text>
  <text> age: {{age}}</text>
 </view>
</template>

//index.js
Page({
 data: {
  list:[
   { name: '张三', age: 15 },
   { name: '李四', age: 25 },
   { name: '王五', age: 18 },
   { name: '赵六', age: 19 },
  ]
 }
})

<!--index.wxml-->
<!-- 声明需要使用的模板文件 -->
<import src ="../template/template.wxml"/>
<view>This is index.wxml</view>
<view wx:for="{{list}}">
  <template is="msgItem" data="{{name:item.name,age:item.age}}"/>
</view>

11.4. 调用不同的模板

有时候，我们有这样的需求，那就是同一个列表中，item数据不同，可能他的样式也是有很大的区别，所以我们使用的模板也会对应不相同，接下来我们就来实现这样需求的小Demo:
首先修改了一下template.wxml，原本该文件中只有一个template，现在我们创建了两个，新增的template仅仅多了一行代码，当然了实际开发中，需求会比这个难很多，在这里只是为了实现Demo。

<!--template.wxml-->
<template name="msgItem">
 <view class="template_style">
  <text> name: {{name}} </text>
  <text class="template_age_style"> age: {{age}}</text>
 </view>
</template>
<template name="msgItem2">
 <view class="template_style">
  <text> name: {{name}} </text>
  <text class="template_age_style"> age: {{age}}</text>
  <text>我是一个未成年</text>>
 </view>
</template>

接下来我们在index.wxml中通过age字段调用不同的模板：

<!--index.wxml-->
<!-- 声明需要使用的模板文件 -->
<import src ="../template/template.wxml"/>
<view>This is index.wxml</view>
<view wx:for="{{list}}">
  <template is="{{item.age >= 18 ? 'msgItem' : 'msgItem2'}}" data="{{name:item.name,age:item.age}}"/>
</view>

三、 注意事项

1. 跳转只支持5级 所以跳转不能全用wx.navigateTo({url:”../index/index”})父级到子集 ,适当搭配wx.redirectTo({url:“../index/index”}) 这个不会显示返回按钮

2. 设置数据时 要用 this.setData({})

3. Scrollview 与下拉刷新存在冲突，不要同时使用，如果要使用上拉加载请使用onReachBottom

4. 说有的请求走 HTTPS 并有安全域名

5. Es6的使用(babel支持的都支持)

6. redirectTo和navigateTo不能再跳转到带有tab选项卡的页面

小程序新增了一个接口wx.switchTab。这个接口是专门用来跳转到带有tabbar的页面

Page({
    onTap: function (event) {        
        wx.switchTab({
            url: "../posts/post"
        });

    }
})

\color{#f00}{!!!}switchTab只能跳转到带有tab的页面，不能跳转到不带tab的页面！跳转不带tab的页面还是需要使用redirect或者navigate！所以，如果如果你的post页面还没有加入tab选项卡，请依然使用redirect或者navigate！

7. Page的onLoad函数里不可以再直接对data变量赋值做数据绑定

用this.setData({})方法来做数据更新

8. input组件使用 bindconfirm作为键盘完成的触发事件

9. 最好在公共的js文件里使用绝对路径

参考文档网址
【微信小程序】第一篇:微信开发者工具安装与使用
【微信小程序】阻止遮罩层下的页面滚动
小程序点击多个指定地方都能关闭弹框
小程序问题处理
小程序显示弹窗时禁止下层的内容滚动
小程序：如何在wxml页面中调用JavaScript函数
微信小程序如何引用外部js，外部样式，公共页面模板

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,271评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,275评论 2赞 380
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,151评论 0赞 336
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,550评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,553评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,559评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,924评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,580评论 0赞 257
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,826评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2赞 320
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,363评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,940评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2赞 342