【微信小程序】第二篇:常見問題解決及常用技能方法

【微信小程序】第二篇:常見問題解決及常用技能方法

一规哲、 常見問題解決

1. Cannot send network request to localhost

菜單欄→設(shè)置→項(xiàng)目設(shè)置

本地設(shè)置

2. button

2.1. 樣式不生效

很多樣式設(shè)置不生效,如無需用到button的特殊屬性,使用改view作為button

2.2. button無法設(shè)置背景色

button設(shè)置的背景色只支持標(biāo)簽名 不要試圖給button設(shè)置類名來改變背景色

3. 阻止遮罩層下的頁面滾動

3.1. 第一種方式

利用position:fixed 禁止頁面滾動

wxml

<view class="indexPage {{proInfoWindow?'indexFixed':''}}">
    <!--此處為整個(gè)頁面的結(jié)構(gòu)內(nèi)容-->
    <button catchTap="_proInfoWindowShow">點(diǎn)擊顯示彈窗</button>
</view>
<!-- 當(dāng)proInfoWindow為true的時(shí)候顯示彈窗-->
<view wx:if="{{proInfoWindow}}">此處為彈窗內(nèi)容</view>

wxss

//添加一個(gè)類名, 把彈窗的下層內(nèi)容定位為fixed.實(shí)現(xiàn)禁止?jié)L動的效果
.indexFixed{
  position: fixed;
  top:0;//top:0可不寫,否則顯示彈窗的同時(shí)會使底層滾動到頂部.
  left:0;
  bottom:0;
  right:0;
}

js

Page({
  data: {  
    proInfoWindow:false,//控制彈窗是否顯示
      
  },
    // 點(diǎn)擊彈窗事件, 設(shè)置proInfoWindow為true, 顯示彈窗.
    // 設(shè)置proInfoWindow為true的同時(shí), 給頁面添加了一個(gè)class名為indexFixed的類.顯示彈窗時(shí)下層就禁止?jié)L動,關(guān)掉彈窗時(shí)就可以滾動.
  _proInfoWindowShow(){
      this.setData({
        proInfoWindow:true
    })
  }
})

3.2. 第二種方式 無 滑動scroll-view組件

用 catchtouchmove="return"

<!--此處為彈窗內(nèi)容-->
<!--外層加 catchtouchmove="return"僅觸摸背景區(qū)域時(shí)不穿透底部.-->
<view  catchtouchmove="return"> 
    <!--在每個(gè)小的區(qū)域內(nèi)加 catchtouchmove="return"-->
    <view  catchtouchmove="return"></view> 
    <view> 
        <!--有需要滾動的列表區(qū)域位置不要加 catchtouchmove="return", 否則列表無法滾動-->
        <view>滾動列表1</view>
        <view>滾動列表2</view>
        <view>滾動列表3</view>
        <view>滾動列表4</view>
    </view>
</view>

應(yīng)用案列


彈窗wxml

彈窗js

3.3. 有 滑動scroll-view組件

在彈出層下的頁面根元素添加動態(tài)樣式class：

<!-- isShowPopup變量確認(rèn)是否展示彈窗的變量 -->
<view class="{{ isShowPopup ? 'stop-scroll' : '' }}">
    <!-- ... -->
</view>

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

4. 出現(xiàn) please do not register multiple Pages in undefined.js 錯(cuò)誤

這多半是在 app.js里添加了Page（）忱反。app.js是應(yīng)用程序級別的不能用Page（），Page*（）只能用于頁面的js文件中弱卡。app.js請使用App（）。

5. 使用background-image真機(jī)上無法顯示圖片尖殃？

background-image如果url指向的是一個(gè)網(wǎng)絡(luò)圖片以故，則真機(jī)可以顯示。但如果url指向的是本地圖片护锤，則在模擬器里顯示正常官地，iOS上無法顯示圖片。建議使用image.

6. 小程序中的換行問題

小程序中的數(shù)據(jù)展示如果有換行烙懦，需要滿足兩個(gè)條件

  • 數(shù)據(jù) 換行符 \n
  • 包含數(shù)據(jù)的盒子必須是<text>

7.小程序中的textarea

textarea是個(gè)讓人頭疼的東西驱入，他是h5 原生的，沒有東西可以定位到他的上面氯析，我們想在它上面顯示東西的時(shí)候只能先把他隱藏亏较，
小程序的textarea和h5 的優(yōu)點(diǎn)不一樣，它的值顯示在value屬性中掩缓，而不是標(biāo)簽內(nèi)

textarea show-confirm-bar=false 無效問題解決
去掉textarea上的完成按鈕欄宴杀，每次輸入換行時(shí)會遮擋住光標(biāo)所在的輸入行。使用show-confirm-bar=’false’竟然無效

解決辦法

show-confirm-bar=''

二拾因、常用技能方法

1. 獲取用戶openid以及userInfo,并插入mysql表中

首先,通過登錄微信公眾平臺獲取appid以及secret

image.png
wx.login({
  success: res => {
    // 發(fā)送 res.code 到后臺換取 openId, sessionKey, unionId
    if (res.code) {
      //發(fā)起網(wǎng)絡(luò)請求
      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: {}, // 設(shè)置請求的 header  
        success: function(res) {
          that.globalData.openid = res.data.openid; //存儲openid 
        }
      })
    } else {
      console.log('登錄失斖铡旷余！' + res.errMsg)
    }
  }
})

2.使用 data-綁定值 動態(tài)傳值

2.1. 獲取

如 data-name,通過e.target.dataset.name 與 e.currentTarget.dataset.name來獲取

2.2 target 與 currentTarget區(qū)別

參考網(wǎng)址:微信小程序之事件

事件分為冒泡事件和非冒泡事件
冒泡事件：當(dāng)一個(gè)組件上的事件被觸發(fā)后，該事件會向父節(jié)點(diǎn)傳遞扁达。
非冒泡事件：當(dāng)一個(gè)組件上的事件被觸發(fā)后正卧，該事件不會向父節(jié)點(diǎn)傳遞。

e.currentTarget 當(dāng)前組件的一些屬性值集合(事件綁定的當(dāng)前組件)
e.target 觸發(fā)事件的組件的一些屬性值集合(觸發(fā)事件的源組件)

特殊事件： canvas 中的觸摸事件不可冒泡跪解，所以沒有 currentTarget炉旷。

應(yīng)用場景

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

說明：點(diǎn)擊 三級 時(shí)，handleTap3 收到的事件對象 target 和 currentTarget 都是 tap3叉讥，而 handleTap2 收到的事件對象 target 就是 tap3窘行，currentTarget 就是 tap2。

3. 小程序點(diǎn)擊多個(gè)指定地方都能關(guān)閉彈框

wxml
js

4. 事件對象

4.1. Bind 冒泡階段觸發(fā)的事件

touchstart touchmove touchcancel touchend tap longtap

4.2. Catch 捕獲階段觸發(fā)都事件

4.3. 事件中獲取對應(yīng)元素的參數(shù)

4.3.1. Wxml中用data給元素加參數(shù)

取值方法 e.currentTarget.dataset.參數(shù)名

  • 參數(shù)名用小寫 大寫會轉(zhuǎn)為轉(zhuǎn)為小寫
  • 如果有橫杠連接會被轉(zhuǎn)為駝峰 msg-a -> msgA
4.3.2. 頁面加載時(shí)獲取連接參數(shù)的方法
Page({
        Onload(options){
        //參數(shù)都在options中
        }
})

4.4 Bindconfirm 捕獲回車鍵

5. 緩存

6. 列表渲染

7. Template模板使用

7.1. 模板頁

tem.wxml

<template name=”temName”>
  <view>這里寫數(shù)據(jù)图仓，data中的數(shù)據(jù)能傳入進(jìn)來</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=”{{這里是需要傳入的數(shù)據(jù)}}” />

js

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

緩存問題,緩存如果未清除會一直存在 罐盔，上限10m

 wx.setStorage({//設(shè)置緩存 默認(rèn)是異步的
  key:"key",
  data:"value"
})

8. 通過使用wxs文件在wxml頁面中調(diào)用JavaScript函數(shù)

8.1. 創(chuàng)建一個(gè)numbertofix.wxs文件，創(chuàng)建numberToFix函數(shù)

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

8.2. 在需要使用numberToFix函數(shù)的頁面引入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

//封裝的函數(shù)
function GetUserInfo2018() {
 console.log("獲取用戶信息8888")
}
  
function count(str) {
 console.log(str)
}
  
//轉(zhuǎn)化成小程序模板語言 這一步非常重要 不然無法正確調(diào)用
module.exports = {
 GetUserInfo2018: GetUserInfo2018,
 count: count
};
  
/*其它頁面調(diào)用
 var common = require("../common/common.js");
 common.GetUserInfo2018();
 common.count("hehe");
*/

10.引用外部樣式

/*
app.wxss是全局樣式救崔，作用于每一個(gè)頁面惶看，
而page下的每一個(gè)的wxss文件只作用于當(dāng)前頁面，并對全局樣式中的相同屬性會覆蓋 
*/
@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. 不帶參數(shù)

首先在pages文件夾中新建一個(gè)template文件夾六孵，文件夾中新建一個(gè)template.wxml文件纬黎，代碼如下

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

然后我們書寫我們所要調(diào)用template的頁面index.wxml

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

11.2. 帶參數(shù)

首先劫窒，修改template.wxml文件本今，我們給模板添加三個(gè)字段，修改后代碼如下

<template name="msgItem">
 <view>
  <text>This is template.wxml文件主巍，我是一個(gè)模板</text>
  <view>
   <text> {{index}}: {{msg1}} </text>
   <text> {{msg2}} </text>
  </view>
 </view>
</template>

接下來我們在index.wxml中傳遞模板中所需要的三個(gè)參數(shù)冠息，修改后的代碼如下：

<!--index.wxml-->
<!-- 聲明需要使用的模板文件 -->
<import src ="../template/template.wxml"/>
<view>This is index.wxml</view>
<template is="msgItem" data="{{index:1,msg1:'msg1數(shù)據(jù)',msg2:'msg2數(shù)據(jù)'}}"/>

11.3. 列表item模板

接下來我們就通過一種常見的情況列表數(shù)據(jù)來使用模板，增加對模板的認(rèn)知煤禽，直接上修改過的代碼：

<!--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. 調(diào)用不同的模板

有時(shí)候，我們有這樣的需求岖赋，那就是同一個(gè)列表中檬果，item數(shù)據(jù)不同，可能他的樣式也是有很大的區(qū)別唐断，所以我們使用的模板也會對應(yīng)不相同选脊，接下來我們就來實(shí)現(xiàn)這樣需求的小Demo:
首先修改了一下template.wxml，原本該文件中只有一個(gè)template脸甘，現(xiàn)在我們創(chuàng)建了兩個(gè)恳啥，新增的template僅僅多了一行代碼，當(dāng)然了實(shí)際開發(fā)中丹诀，需求會比這個(gè)難很多钝的，在這里只是為了實(shí)現(xiàn)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>我是一個(gè)未成年</text>>
 </view>
</template>

接下來我們在index.wxml中通過age字段調(diào)用不同的模板：

<!--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>

三、 注意事項(xiàng)

1. 跳轉(zhuǎn)只支持5級 所以跳轉(zhuǎn)不能全用wx.navigateTo({url:”../index/index”})父級到子集 ,適當(dāng)搭配wx.redirectTo({url:“../index/index”}) 這個(gè)不會顯示返回按鈕

2. 設(shè)置數(shù)據(jù)時(shí) 要用 this.setData({})

3. Scrollview 與下拉刷新存在沖突硝桩，不要同時(shí)使用沿猜，如果要使用上拉加載請使用onReachBottom

4. 說有的請求走 HTTPS 并有安全域名

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

6. redirectTo和navigateTo不能再跳轉(zhuǎn)到帶有tab選項(xiàng)卡的頁面

小程序新增了一個(gè)接口wx.switchTab。這個(gè)接口是專門用來跳轉(zhuǎn)到帶有tabbar的頁面

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

    }
})

\color{#f00}{!!!}switchTab只能跳轉(zhuǎn)到帶有tab的頁面碗脊，不能跳轉(zhuǎn)到不帶tab的頁面啼肩！跳轉(zhuǎn)不帶tab的頁面還是需要使用redirect或者navigate！所以衙伶，如果如果你的post頁面還沒有加入tab選項(xiàng)卡祈坠，請依然使用redirect或者navigate！

7. Page的onLoad函數(shù)里不可以再直接對data變量賦值做數(shù)據(jù)綁定

用this.setData({})方法來做數(shù)據(jù)更新

8. input組件使用 bindconfirm作為鍵盤完成的觸發(fā)事件

9. 最好在公共的js文件里使用絕對路徑

參考文檔網(wǎng)址
【微信小程序】第一篇:微信開發(fā)者工具安裝與使用
【微信小程序】阻止遮罩層下的頁面滾動
小程序點(diǎn)擊多個(gè)指定地方都能關(guān)閉彈框
小程序問題處理
小程序顯示彈窗時(shí)禁止下層的內(nèi)容滾動
小程序：如何在wxml頁面中調(diào)用JavaScript函數(shù)
微信小程序如何引用外部js矢劲，外部樣式赦拘，公共頁面模板

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市卧须，隨后出現(xiàn)的幾起案子另绩，更是在濱河造成了極大的恐慌，老刑警劉巖花嘶，帶你破解...
    沈念sama閱讀 207,113評論 6贊 481
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件笋籽，死亡現(xiàn)場離奇詭異，居然都是意外死亡椭员，警方通過查閱死者的電腦和手機(jī)车海，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評論 2贊 381
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來隘击，“玉大人侍芝，你說我怎么就攤上這事÷裢” “怎么了州叠？”我有些...
    開封第一講書人閱讀 153,340評論 0贊 344
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長凶赁。 經(jīng)常有香客問我咧栗，道長，這世上最難降的妖魔是什么虱肄？ 我笑而不...
    開封第一講書人閱讀 55,449評論 1贊 279
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任致板，我火速辦了婚禮，結(jié)果婚禮上咏窿，老公的妹妹穿的比我還像新娘斟或。我一直安慰自己，他們只是感情好集嵌，可當(dāng)我...
    茶點(diǎn)故事閱讀 64,445評論 5贊 374
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布萝挤。 她就那樣靜靜地躺著御毅，像睡著了一般。 火紅的嫁衣襯著肌膚如雪平斩。 梳的紋絲不亂的頭發(fā)上亚享，一...
    開封第一講書人閱讀 49,166評論 1贊 284
  • 城市分裂傳說
    那天，我揣著相機(jī)與錄音绘面，去河邊找鬼欺税。 笑死，一個(gè)胖子當(dāng)著我的面吹牛揭璃，可吹牛的內(nèi)容都是我干的晚凿。 我是一名探鬼主播，決...
    沈念sama閱讀 38,442評論 3贊 401
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼瘦馍，長吁一口氣：“原來是場噩夢啊……” “哼歼秽！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起情组，我...
    開封第一講書人閱讀 37,105評論 0贊 261
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤燥筷，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后院崇，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體肆氓，經(jīng)...
    沈念sama閱讀 43,601評論 1贊 300
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,066評論 2贊 325
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年底瓣，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了谢揪。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,161評論 1贊 334
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡捐凭，死狀恐怖拨扶，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情茁肠，我是刑警寧澤患民，帶...
    沈念sama閱讀 33,792評論 4贊 323
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站垦梆，受9級特大地震影響匹颤，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜奶赔，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,351評論 3贊 307
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一惋嚎、第九天 我趴在偏房一處隱蔽的房頂上張望杠氢。 院中可真熱鬧站刑，春花似錦、人聲如沸鼻百。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評論 0贊 19
  • 一樁弒父案摆尝，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至因悲，卻和暖如春堕汞，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背晃琳。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評論 1贊 261
  • 情欲美人皮
    我被黑心中介騙來泰國打工讯检， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人卫旱。 一個(gè)月前我還...
    沈念sama閱讀 45,618評論 2贊 355
  • 代替公主和親
    正文 我出身青樓人灼，卻偏偏與公主長得像，于是被迫代替她去往敵國和親顾翼。 傳聞我的和親對象是個(gè)殘疾皇子投放，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,916評論 2贊 344