1. 程式人生 > >微信小程式開發過程中總結的注意事項

微信小程式開發過程中總結的注意事項

1、picker從後臺動態取值

 <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
    <view class="picker">
      區域:{{objectArray[index].name}}
    </view>
  </picker>

 array: ['環翠區', '高區', '經區', '其他'],

 objectArray: [
      {
        id: 12,
        name: '環翠區'
      },
      {
        id: 13,
        name: '高區'
      },
      {
        id: 14,
        name: '經區'
      },
      {
        id: 15,
        name: '其他'
      }
    ],
  },
  bindPickerChange: function(e) {
    console.log('picker傳送選擇改變,攜帶值為', tobjectArray[e.detail.value]) //這個值只是角標的順序值

  console.log('picker傳送選擇改變,攜帶值為', this.data. objectArray[e.detail.value].id) //這樣才能取到真正的ID值

}

2、wx.request從後臺取值成功不能用 that.setData({.......})會報錯"this.setData is not a function;at api request success callback function"

必須寫成varthat=this  

完整例子:

[javascript] view plain copy
  1. data: {  
  2.     logs:[]  
  3.   },  
  4. onLoad:function(){  
  5. this.getdata();  
  6. }  
  7. getdata:function(){//定義函式名稱
  8. var that=this;   // 這個地方非常重要,重置data{}裡資料時候setData方法的this應為以及函式的this, 如果在下方的sucess直接寫this就變成了wx.request()的this了
  9.     wx.request({  
  10.       url:'http://www.phonegap100.com/appapi.php?a=getPortalCate',//請求地址  
  11.       data:{//傳送給後臺的資料
  12.         name:"bella"
    ,  
  13.         age:20  
  14.       },  
  15.       header:{//請求頭
  16.         "Content-Type":"applciation/json"
  17.       },  
  18.       method:"GET",//get為預設方法/POST
  19.       success:function(res){  
  20.         console.log(res.data);//res.data相當於ajax裡面的data,為後臺返回的資料
  21.       that.setData({//如果在sucess直接寫this就變成了wx.request()的this了.必須為getdata函式的this,不然無法重置呼叫函式
  22.       logs:res.data.result  
  23.           })  
  24.       },  
  25.       fail:function(err){},//請求失敗
  26.       complete:function(){}//請求完成後執行的函式
  27.     })  
  28.   },  
  29.   wxml頁面:  
  30. <view  wx:for="{{logs}}" wx:for-item="value">  
  31.   {{value.catname}}  
  32. </view>  

3、介面A.wxml引數值傳遞

  1. <viewclass="nav_top_items"bindtap="switchTab "data-id="{{item.id}}">
  1. 邏輯處理A.js裡傳送  
  2.    // 跳轉至詳情頁  
  3.   navigateDetail: function(e){  
  4.     wx.navigateTo({  
  5.         url:'../detail/detail?artype=' + e.currentTarget.dataset.id  
  6.     })  
  7.   },  
  1. 邏輯B.js接收引數值  
  2.  onLoad: function (options) {  
  3.     this.setData({  
  4.       id:options.id  
  5.     })      
  6.   },  
[javascript] view plain copy [javascript] view plain copy

4、小程式引數傳值

現在已知傳遞引數的方法只找到三種,先總結下:

1.APP.js

我把常用且不會更改的引數放在APP.js的data裡面了.在各個page中都可以拿到var app = getApp();

app上就可以拿到存在data中的引數.

2. wx.navigateTo({})中URL攜帶引數

demo中已經寫出:

 wx.navigateTo({
      url: "../newpage/newpage?infofromindex=" + this.data.infofromindex,
  });

傳值:在navigator的屬性url後拼接?id(引數名字)=要傳遞的值 (如果多個引數用&分開 &name=value&.......)

3.wx.setStorage(OBJECT) 資料快取

微信開發文件中的資料快取方法:

①儲存資料

 try {
      wx.setStorageSync('infofrominput', this.data.infofrominput)
    } catch (e) {
 }

②獲取資料

  //獲取
        wx.getStorage({
            key: 'infofrominput',
            success: function (res) {
                _this.setData({
                    infofromstorage: res.data,
                })
            }
        })

5、從一個JS引用另一個JS中的方法

先在當前JS中引用

var fileData = require('../../utils/data.js')

被引用的js需要暴露接口才可以被引用到,不然會報{{page}}錯誤

/*
 * 對外暴露介面
 */ 
module.exports = {
  getBannerData : getBannerData,
  getpockrooms:getpockrooms

}

相關推薦

程式開發過程總結注意事項

1、picker從後臺動態取值  <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">     <view class="picker">      

程式開發過程遇到的問題

最近接了一個微信小程式的活,想象中微信小程式應該跟普通的網站開發差不多,實際上就前端來說確實差不多,但是還是遇到不少蛋疼的問題,所以這裡記錄一下,希望對後來人有所啟示。伺服器端方面:伺服器端是用jav

程式 開發過程遇到的坑(一)

1.我們使用app.json檔案來對微信小程式進行全域性配置,決定頁面檔案的路徑、視窗表現、設定網路超時時間、設定多 tab 的時候在pages中寫註釋的時候回報錯。 例如: { "pages":[ //這是首頁面 "pages/

程序開發過程踩過的坑集合,沒有解決不了的錯誤,只有踩不完的坑

pac 清除 bind ren 透明 .json 配置 reac 之間 微信小程序開發過程中踩過的坑,包含很多小程序開發細節,有些可能你也踩過。。。1、height:auto; 失效,必須指定 image 的高度為具體數值,不然高度為0。2、真機和模擬器的問題總結 inp

程式開發過程問題總彙

之前在開發一個控車小程式,把過程中稍微需要搜尋的問題做了記錄。   1. 關鍵詞:本地資源圖片無法通過WXSS獲取 描述:做小程式開發的時候,如果你需要使用圖片作為背景,也就是想使用background-img這個屬性,但在小程式中這個屬性是無法使用本地資源的。它要求你必須使用網路圖片,也就

程式 互動過程物件陣列賦值

舉個例子 這個留言框在wxml頁面只寫了一個 但是如果是多店鋪的購買 他就會迴圈出現多次  每次輸入店鋪留言 只會儲存最後一個input的內容但是後臺要拿到多個內容 <!-- 留言 --> <view class='conten

程式 開發過程記錄

微信小程式開發過程記錄 本文僅作為開發過程中遇到問題的記錄,沒辦法詳細整理,將來有時間的時候也許會整理。sorry。 問題:如何取得自定義元件的例項 在page的js檔案中,可以使用selectComponent來獲取自定義元件, 但注意如果該元件處於

記錄程式開發過程

1.下載微信web開發者工具   對著微信小程式api開發前端 2.服務端需要自己開發  2.1 ipc備案:就是填一堆資料然後稽核 2.2 https服務:需要先申請證書  可以去阿里雲騰訊雲之類的地方申請一年免費的個人證書 2.3 證書放入後端專案中啟動 3.微信小程式

程式開發遇到的問題。總結

開發遇到問題: 1.image設定圖片的時候圖片在開發工具上面顯示,可是執行到手機上面不顯示。仔細檢視是不是先圖片的時候。設定路徑不小心在後面加了空格。 例如: 正確:手機上顯示 <image class="icon_tubiao" src="../../image/

程式開發的http請求總結

在微信小程式進行網路通訊,只能和指定的域名進行通訊,微信小程式包括四種類型的網路請求。 普通HTTPS請求(wx.request) 上傳檔案(wx.uploadFile) 下載檔案(wx.downloadFile) WebSocket通訊(wx.connectSocket) 這裡以介紹wx.request

程式開發問題解決,常見BUG總結

小程式開發中的各種坑,進行簡要總結,歡迎填坑` 優化程式碼包 儘量減少程式碼包的大小,因為程式碼包大小直接影響到下載速度,從而影響使用者的首次開啟體驗。2M限制。小程式程式碼包經過編譯後,會放在微信的 CDN 上供使用者下載,CDN 開啟了 GZIP 壓縮,多數圖片格式大大降低程式碼包壓縮率。使用雲伺服器

程式開發textarea文字域監聽字數限制與動態計算

微信小程式開發時常會有評論或者備註功能,都會用到文字域字元長度計算以及字元限制的功能,筆者把最簡潔易用的案例分享出來。學習之前先看微信官方API文件 https://mp.weixin.qq.com/debug/wxadoc/dev/component/textarea.html

程式開發總結與心得

0 前言 最近的工作重心一直在小程式,也開發了幾個小程式,對小程式開發的流程及相關技術相對比較熟悉,在開發過程中也總結了一些心得經驗、瞭解一些小程式文件上沒有的東西、踩了一些坑。所以想著寫篇文章記錄下來,並藉此將小程式開發的相關知識進行梳理,方便以後參考,也作為自己工作的階段性總結。同時也希望可以通過文

程式開發的二三事之網易雲IMSDK DEMO

本文由作者鄒永勝授權網易雲社群釋出。 簡介 為了更好的展示我們即時通訊SDK強悍的能力,網易雲信IM SDK微信小程式DEMO的開發就提上了日程。用產品的話說就是: 雲信 IM 小程式 SDK 的能力演示 提供開發者小程式開發參考 換句話說就是在微信裡面通過

程式,開發幾個重要的知識點(加密解密,轉發,進入場景,session_key)

小程式的授權資訊:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/authorize.html   小程式的系統引數和進入場景引數等:https://developers.weixin.qq.com/

程式開發注意

一、<view> 標籤與 <block> 標籤的區別 <view> 是一個元件,會在頁面上做渲染 <block>不是一個元件,它僅僅是一個包裝元素,只接受控制屬性,不會在頁面中做任何渲染 如下栗子,wx:else 是一個

程式開發經驗總結(遇到的坑和問題彙總)

小編推薦:Fundebug專注於JavaScript、微信小程式、微信小遊戲,Node.js和Java實時BUG監控。真的是一個很好用的bug監控費服務,眾多大佬公司都在使用。 前言: 前段時間公司打算做一款基於線下服務的小程式,涉及到掃碼支付,地圖,充值,會員體系等功能。由於

程式開發記錄總結

    微信小程式的簡易教程請參考官方文件:     https://developers.weixin.qq.com/miniprogram/dev/index.html     這裡只記錄自己開發中遇到的一些問題及注意

程式開發手記之七:一個程式上線後的總結(上)

終於,經過大概一週時間,磕磕絆絆地提交稽核了,一個移動猿開發小程式,也算有了些心得,也遇到了些坑,這裡和大家一起分享下。 怎麼樣調佈局 先說一個題外話,最後引入正題。 如果翻看過一些資料,大家肯定很容易會發現一件事,那就是關於image標籤的預設寬高,

程式教程、程式開發資源下載彙總(6.16日更新,持續更新……)

摘要:微信小程式教程合集、微信小程式開發資源合集、微信小程式DEMO合集、微信小程式商店合集、微信小程式經驗合集、微信小程式技巧合集 微信小程式開發工具 微信小程式開發教程 微信小程式入門系列 微信小程式入門例項系列 微信小程式從零入門系列 微信小程式基