微信小程序總結(jié)

遇到的問題:

小程序不支持長按識別二維碼

小程序不支持長按識別二維碼,所以遇到產(chǎn)品要求要做成小程序頁面但是需要長按識別二維碼的場景需要注意下。

解決方式:

  1. h5方案:改成小程序嵌h5方案褥傍,將需要長按識別二維碼的頁面做成h5頁面孕惜,h5中可長按識別二維碼
  2. 小程序方案:使用小程序接口wx.previewImage點擊圖片進行預(yù)覽,圖片預(yù)覽后可以長按識別二維碼

小程序web-view可打開小程序關(guān)聯(lián)公眾號文章

小程序web-view中可以打開小程序關(guān)聯(lián)的公眾號的文章,但不能是短鏈形式打開的文章锻梳,需要是 https://mp.weixin.qq.com/ 開頭的鏈接

一些會跳轉(zhuǎn)到發(fā)布版本小程序的場景

  • 小程序URL link打開跳轉(zhuǎn)的是已發(fā)布的小程序(只能生成已發(fā)布的小程序的 URL Link)
  • 從消息訂閱模板點擊跳轉(zhuǎn)小程序頁面,為已發(fā)布小程序頁面

css

  • 設(shè)置input的disabled净捅、placeholder顏色
input[disabled]{
 background: unset;
 color: #6b6b6b;
 -webkit-opacity: 1;
 opacity: 1;
 -webkit-text-fill-color: #6b6b6b;
}

input[disabled] .placeholder-class{
 color: #C8C8C8;
 -webkit-text-fill-color: #C8C8C8;
}

.placeholder-class{
 color: #C8C8C8 !important;
}

// wxml
<input
   v-model="form.name"
   placeholder="請輸入您的姓名"
   placeholder-class="placeholder-class"
   :disabled="isDisabledInput"  
>
</input>
  • 本地資源無法通過 WXSS 獲取疑枯,
    background-image:可以使用網(wǎng)絡(luò)圖片,或者 base64蛔六,或者使用image標(biāo)簽

  • 能使用calc:height: calc(100% - 100rpx);

  • 官方組件的樣式可以通過!important覆蓋

  • button組件默認都加了一個border荆永,該button控件上有一個偽元素(::after),設(shè)置了border国章,只要把button::after 的border 屬性去掉就可以了具钥,

    /*去掉按鈕邊框*/
    button::after {
      border: 0;
    } 
    /*去掉button默認樣式*/
    button {
      border-radius: 0;
      background-color: transparent;
      padding: 0;
      margin: 0;
    }
    
  • 修改radio框的樣式:先把radio組件隱藏起來,自己寫自定義樣式和選中樣式捉腥,再在data中設(shè)置一個選中的變量氓拼,來顯示是否顯示選中樣式

    <radio-group class="radioGroup" bindchange="radioChange">
      <label class="radio" wx:for="{{items}}" wx:key="id">
        <!-- 自定義的radio樣式 -->
        <view class='radioPoint'>
          <view class='radioDefault'>
            <view class="{{radioCheckVal==item.id?'radioActive':''}}"></view>
          </view>
        </view>
        <view class='radioText'> {{item.value}}</view>
        <!-- 隱藏默認的radio樣式 -->
        <radio value="{{item.id}}" hidden="true" checked="{{item.checked}}" />
      </label>
    </radio-group>
    
    Page({
      /* 頁面的初始數(shù)據(jù) */
      data: {
        items: [
          { id: 1, value: '選項1' },
          { id: 2, value: '選項2' },
        ],
        radioCheckVal: null
      },
      radioChange: function (e) {
        this.setData({
          radioCheckVal: e.detail.value
        })
      },
    })
    
  • 在微信小程序內(nèi)的文字無法長按復(fù)制,除了text節(jié)點以外抵碟。但要在text標(biāo)簽內(nèi)加一個“selectable”屬性桃漾。 <text selectable='true' ><text/>

js

  • setData 函數(shù)用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層(異步),同時改變對應(yīng)的 this.data 的值(同步)拟逮。

    1. 直接修改 this.data 而不調(diào)用 this.setData 是無法改變頁面的狀態(tài)的撬统,還會造成數(shù)據(jù)不一致。
    2. 單次設(shè)置的數(shù)據(jù)不能超過1024kB敦迄,請盡量避免一次設(shè)置過多的數(shù)據(jù)恋追。
    3. 請不要把 data 中任何一項的 value 設(shè)為 undefined ,否則這一項將不被設(shè)置并可能遺留一些潛在問題罚屋。
  • 小程序里面的打開的頁面苦囱,請求需要是https協(xié)議,websocket協(xié)議需要是wss協(xié)議

  • 按小程序右上角退出小程序和按home鍵退出微信脾猛,小程序里面的ws連接都不會斷

  • 小程序通過按鈕點擊分享撕彤,無法做到先發(fā)起網(wǎng)絡(luò)請求獲取某些信息再進行分享的功能,因為onShareAppMessage方法必須要return一個對象猛拴,不能放在wx.request回調(diào)里面return羹铅,必須事先獲取。

    //分享到個人/群判斷方法
    Page({
        onShareAppMessage: function () {
          //設(shè)置withShareTicket: true才能獲取shareTickets信息
          wx.showShareMenu({
            withShareTicket: true
          })
          return {
            title: '分享標(biāo)題',
            path: '/pages/index/index',
            imageUrl: '',
            success: (res) => {
              // 轉(zhuǎn)發(fā)成功
              if (res.hasOwnProperty('shareTickets')) {
                // 轉(zhuǎn)發(fā)到群
                wx.getShareInfo({
                  shareTicket: res.shareTickets[0],
                  success: (res) => {
                    //encryptedData,iv發(fā)送給后臺解密愉昆,獲取到openGId
                  },
                  fail: function (res) {
                    console.log('獲取微信分享信息失敗')
                  }
                })
              }
              else {
                // 轉(zhuǎn)發(fā)到個人
              }
            },
            fail: function (res) {
              // 轉(zhuǎn)發(fā)失敗
            }
          }
        },
      })
    
  • 隱藏小程序?qū)Ш綑诜椒ㄖ霸保赼pp.json中配置navigationStyle:

    {
      "pages": [],
      "window": {
        "navigationStyle": "custom"
      }
    }
    
  • 微信sdk分享的鏈接中不能含有中文字符,否則不能自定義分享跛溉,一定要把分享的鏈接encode一下

  • 處理退出小程序的操作:目前沒有提供這樣的接口焊切,但是可以用wx.navigateBack()做處理扮授,將跳轉(zhuǎn)層級設(shè)為最大跳轉(zhuǎn)數(shù)量即可。wx.navigateBack({delta:20})

  • 涉及到經(jīng)常切換的需要用hidden來實現(xiàn)樣式切換蛛蒙,不要用wx:if糙箍,用這個切換的時候會導(dǎo)致閃爍問題

  • 自定義組件里面的wxss不會影響到頁面的樣式,所以不能繼承自定義組件里面的樣式

  • 獲取dataset:獲取最外層dataset通過event.currentTarget.dataset就可以獲取牵祟,里面的子元素就不用寫上data-,而不用event.target.dataset獲取

      <view class="btn" bindtap="tapNav" data-nav="1">
      </view>
    
      <view class="btn" bindtap="tapNav" data-nav="1">
        <view data-nav="2"></view>
      </view>
    
      // 讀取當(dāng)前執(zhí)行事件的view data-nav值打印出來
      // 第一個打出1
      // 第二個如果點擊的位置是子view的話抖格,會打印出2.
      tapNav:function(event){
        console.log(event.target.dataset.nav) //2
        console.log(event.currentTarget.dataset.nav) //1
      },
    
  • 生命周期執(zhí)行順序:onLoad->onShow->onReady

  • 授權(quán)和登錄是兩回事诺苹。登錄是用戶無感知的,獲取到code 和后端通信獲得openid來定位用戶雹拄。而授權(quán)才能獲取用戶頭像和名字等信息

  • 在不授權(quán)的情況下收奔,可以通過open-data獲取用戶基本信息,在微信6.6.1版本中獲取不了滓玖,并且基礎(chǔ)庫1.9.90版本才開始支持坪哄,遇到需要顯示用戶信息的地方還是需要手動授權(quán),不能依賴于open-data势篡。

    <button open-type="getUserInfo" bindgetuserinfo="getUserInfo"></button>
    
  • 無論是bindscrolltoupper 還是 bindscrolltoupper做上拉下拉刷新都需要注意這兩個事件是會多次調(diào)用的翩肌。需要一個標(biāo)識符來攔截多次調(diào)用。下拉刷新建議用 page

  • this.setData()修改數(shù)據(jù)是異步的禁悠,因此不能用它來做上下拉刷新的標(biāo)識符

  • 頁面路徑只能是五層念祭,請盡量避免多層級的交互方式。

  • 路由傳遞參數(shù)bug: 比較長的字符串作為參數(shù)應(yīng)該放在最后碍侦。

      const TestUserData = {
        header: "https://pic.qiushibaike.com/system/avtnew/3422/34228569/thumb/20170914201113.JPEG?imageView2/1/w/90/h/90",
        name: "哈哈哈哈",
        text: "紅鯉魚和綠鯉魚與驢",
      }
      // 跳轉(zhuǎn)之后只能讀取到header
      wx.navigateTo({
        url: `../result/result?header=${TestUserData.header}&name=${TestUserData.name}&text=${TestUserData.text}`,
      })
      // 跳轉(zhuǎn)之后三個參數(shù)都能讀取
      wx.navigateTo({
        url: `../result/result?name=${TestUserData.name}&text=${TestUserData.text}&header=${TestUserData.header}`,
      })
    
  • 授權(quán)彈窗如果用戶很久不響應(yīng)的話粱坤,就會調(diào)用失敗

  • transform: translate(0,100rpx);一個絕對定位的布局會撐開page節(jié)點

  • 路由跳轉(zhuǎn)bug:經(jīng)過測試,因為頁面跳轉(zhuǎn)是有動畫時效的瓷产,在動畫進行中當(dāng)前頁面還能操作站玄。如果雙擊當(dāng)前跳轉(zhuǎn)按鈕機會進行兩次跳轉(zhuǎn)。第二次點擊的時候小程序內(nèi)置的路由棧是已經(jīng)定位到了新的頁面了濒旦,而這時候在按照原來的路由棧去定位當(dāng)前頁面株旷,因此會報錯。所以頁面跳轉(zhuǎn)按鈕需要進行短時間多次點擊的限制

素材

  • 素材引入使用相對路徑
  • 支持image內(nèi)src放置svg疤估。但是不支持直接在wxml里面直接使用svg
  • 錄音音頻灾常,舊版的是silk格式,和公眾號開發(fā)的時候一致。而新版可以自己選擇aac
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末铃拇,一起剝皮案震驚了整個濱河市钞瀑,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌慷荔,老刑警劉巖雕什,帶你破解...
    沈念sama閱讀 217,907評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡贷岸,警方通過查閱死者的電腦和手機壹士,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,987評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來偿警,“玉大人躏救,你說我怎么就攤上這事∶簦” “怎么了盒使?”我有些...
    開封第一講書人閱讀 164,298評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長七嫌。 經(jīng)常有香客問我少办,道長,這世上最難降的妖魔是什么诵原? 我笑而不...
    開封第一講書人閱讀 58,586評論 1 293
  • 正文 為了忘掉前任英妓,我火速辦了婚禮,結(jié)果婚禮上绍赛,老公的妹妹穿的比我還像新娘蔓纠。我一直安慰自己,他們只是感情好惹资,可當(dāng)我...
    茶點故事閱讀 67,633評論 6 392
  • 文/花漫 我一把揭開白布贺纲。 她就那樣靜靜地躺著,像睡著了一般褪测。 火紅的嫁衣襯著肌膚如雪猴誊。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,488評論 1 302
  • 那天侮措,我揣著相機與錄音懈叹,去河邊找鬼。 笑死分扎,一個胖子當(dāng)著我的面吹牛澄成,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播畏吓,決...
    沈念sama閱讀 40,275評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼墨状,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了菲饼?” 一聲冷哼從身側(cè)響起肾砂,我...
    開封第一講書人閱讀 39,176評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎宏悦,沒想到半個月后镐确,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體包吝,經(jīng)...
    沈念sama閱讀 45,619評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,819評論 3 336
  • 正文 我和宋清朗相戀三年源葫,在試婚紗的時候發(fā)現(xiàn)自己被綠了诗越。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,932評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡息堂,死狀恐怖嚷狞,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情储矩,我是刑警寧澤感耙,帶...
    沈念sama閱讀 35,655評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站持隧,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏逃片。R本人自食惡果不足惜屡拨,卻給世界環(huán)境...
    茶點故事閱讀 41,265評論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望褥实。 院中可真熱鬧呀狼,春花似錦、人聲如沸损离。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,871評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽僻澎。三九已至貌踏,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間窟勃,已是汗流浹背祖乳。 一陣腳步聲響...
    開封第一講書人閱讀 32,994評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留秉氧,地道東北人眷昆。 一個月前我還...
    沈念sama閱讀 48,095評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像汁咏,于是被迫代替她去往敵國和親亚斋。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,884評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 微信小程序 一:項目開始 注冊賬號 申請小程序賬號AppID:服務(wù)器域名:小程序發(fā)請求必須先配置請求的服務(wù)器域名 ...
    晨思的海閱讀 528評論 0 1
  • 微信小程序剛出來攘滩,讓前端這個圈子又熱了起來帅刊,不少從業(yè)人員,也開始嘗鮮轰驳; 從官網(wǎng)上的wiki到微信開發(fā)工具的使用厚掷,有...
    晴風(fēng)無眠閱讀 602評論 0 0
  • 以下內(nèi)容是張小龍在12月28號在微信公開課的關(guān)于小程序的全部講解弟灼。 手機是肢體的延伸,而電腦pc不是冒黑。 微信不會搞...
    雙魚大貓閱讀 724評論 1 3
  • 我是一個早就畢業(yè)了的孩子田绑,出社會好多年,那些曾經(jīng)覺得灰暗的記憶抡爹,現(xiàn)在回想起來其實也挺幸福的掩驱。 五年前的夏...
    花影流光一曲千年閱讀 152評論 0 4
  • 李茂書法
    洗墨人閱讀 163評論 0 0