微信小程式開發過程中總結的注意事項
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"
必須寫成var
that=
this
;
完整例子:
[javascript] view plain copy- data: {
-
logs:[]
- },
- onLoad:function(){
- this.getdata();
- }
- getdata:function(){//定義函式名稱
- var that=this; // 這個地方非常重要,重置data{}裡資料時候setData方法的this應為以及函式的this, 如果在下方的sucess直接寫this就變成了wx.request()的this了
- wx.request({
- url:'http://www.phonegap100.com/appapi.php?a=getPortalCate',//請求地址
- data:{//傳送給後臺的資料
-
name:"bella"
- age:20
- },
- header:{//請求頭
- "Content-Type":"applciation/json"
- },
- method:"GET",//get為預設方法/POST
- success:function(res){
- console.log(res.data);//res.data相當於ajax裡面的data,為後臺返回的資料
- that.setData({//如果在sucess直接寫this就變成了wx.request()的this了.必須為getdata函式的this,不然無法重置呼叫函式
- logs:res.data.result
- })
- },
- fail:function(err){},//請求失敗
- complete:function(){}//請求完成後執行的函式
- })
- },
- wxml頁面:
- <view wx:for="{{logs}}" wx:for-item="value">
- {{value.catname}}
- </view>
3、介面A.wxml引數值傳遞
- <viewclass="nav_top_items"bindtap="switchTab "data-id="{{item.id}}">
- 邏輯處理A.js裡傳送
- // 跳轉至詳情頁
- navigateDetail: function(e){
- wx.navigateTo({
- url:'../detail/detail?artype=' + e.currentTarget.dataset.id
- })
- },
- 邏輯B.js接收引數值
- onLoad: function (options) {
- this.setData({
- id:options.id
- })
- },
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合集、微信小程式商店合集、微信小程式經驗合集、微信小程式技巧合集 微信小程式開發工具 微信小程式開發教程 微信小程式入門系列 微信小程式入門例項系列 微信小程式從零入門系列 微信小程式基