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

2020-12-15 本文已影响0人 smartdream

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

一、常见问题解决

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;
}

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

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=”{{这里是需要传入的数据}}” />

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，外部样式，公共页面模板

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

一、 常见问题解决

1. Cannot send network request to localhost

2. button

2.1. 样式不生效

2.2. button无法设置背景色

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

3.1. 第一种方式

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

3.3. 有 滑动scroll-view组件

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

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

6. 小程序中的换行问题

7.小程序中的textarea

二、常用技能方法

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

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

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

2.1. 获取

2.2 target 与 currentTarget区别

应用场景

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

4. 事件对象

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

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

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

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

4.3.2. 页面加载时获取连接参数的方法

4.4 Bindconfirm 捕获回车键

5. 缓存

6. 列表渲染

7. Template模板使用

7.1. 模板页

7.2. 引用页

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

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

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

9. 引用外部js

10.引用外部样式

11. 引用公共页面模板

11.1. 不带参数

11.2. 带参数

11.3. 列表item模板

11.4. 调用不同的模板

三、 注意事项

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选项卡的页面

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

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

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

猜你喜欢

热点阅读

一、常见问题解决

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

3.3. 有滑动scroll-view组件

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

2.2 `target` 与 `currentTarget`区别

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

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

三、注意事项

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

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

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

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