首頁 微信小程式 小程式開發 微信小程式開發必看的四十個技巧總結

微信小程式開發必看的四十個技巧總結

Mar 14, 2017 pm 05:42 PM
微信小程式

這篇文章主要給大家介紹了微信小程式開發必看的四十個技巧總結的相關資料,相信對大家的學習或使用微信小程式具有一定的參考借鑒價值,所以特別推薦給大家,需要的朋友可以一起來看看吧。

前言

微信「小程式」正式上線一週時間,相關話題持續升溫。支付寶開發「小程式」的訊息也隨即曝出,網路巨頭們摩拳擦掌,不少網友調侃說,這勢頭感覺要挑戰現有的「APP帝國」了。那麼,面對如此炙手可熱的小程序,WeX5行動開發雲也沒閒著,經過全網搜尋,為大家篩選出一條小程式開發者的必讀文章,內容涵蓋小程式開發實戰需要注意的40個技術點,供大家參考!

Q:為什麼腳本內不能使用window等物件

#A:頁面的腳本邏輯是在JsCore中執行,JsCore是沒有視窗物件的環境,所以不能在腳本中使用window,也無法在腳本中操作元件

Q:為什麼zepto/ jquery 無法使用

A:zepto/jquery 會使用到window物件document對象,所以無法使用。

Q:wx.navigateTo無法開啟頁面

#A:一個應用程式同時只能開啟5個頁面,當已經開啟了5個頁面之後,wx.navigateTo不能正常開啟新頁面。請避免多層級的互動方式,或使用wx.re<a href="http://www.php.cn/wiki/1275.html" target="_blank">dir</a>ectTo

#Q:樣式表不支援級聯選擇器

A:WXSS支援以.開始的類別選擇器

Q:本機資源無法透過css 取得

#A:<a href="http://www.php.cn/wiki/895.html" target="_blank">background-image</a>:可以使用網路圖片,或是base64,或是使用標籤

Q:如何修改視窗的背景顏色

A:使用page 標籤選擇器,可以修改頂層節點的樣式

page { 
  display: block; 
  min-height: 100%; 
  background-color: red;
}
登入後複製

Q:為什麼上傳不成功

A:為了提升體驗流暢度,編譯後的程式碼包大小需小於1MB ,大於1MB 的程式碼包會上傳失敗。

Q:HTTPS 請求不成功

A:tls 僅支援1.2 及以上版本

Q:網路請求的referer

A:網路請求的referer 是不可以設定的,格式固定為https://servicewechat.com/{appid }/{version}/page-frame.html,其中 {appid} 為小程式的 appid, {version} 為小程式的版本號,版本號為0 表示為開發版。

Q:不能直接操作Page.data

A:避免在直接對Page.data 進行賦值修改,請使用Page.<a href="http://www.php.cn/code/8209.html" target="_blank">set</a>Data 進行操作才能將資料同步到頁面中進行渲染怎麼取得使用者輸入

能夠取得使用者輸入的元件,需要使用元件的屬性bindchange將使用者的輸入內容同步到AppService。

<input id="myInput" bindchange="bindChange" /><checkbox id="myCheckbox" bindchange="bindChange" />
var inputContent = {}
 
Page({
 data: {
 inputContent: {}
 },
 bindChange: function(e) {
 inputContent[e.currentTarget.id] = e.detail.value
 }
})
登入後複製

Q:微信小程式支援fetch或promise嗎?

A: promise工具目前不支持,fetch 用戶端不支援工具下個版本保持統一。

Q:touchmove滑動事件裡面的currentTarget. id值不變。

A:ouchmove / touchend 事件的 target / currentTarget 會永遠是 touchstart 時的 target / currentTarget 。

Q:wx.request的POST方法的參數傳輸伺服器接收不到的bug。

A:wx.request post 的content-type 預設為'application/<a href="http://www.php.cn/wiki/1488.html" target="_blank">json</a> '

#如果伺服器沒有用到json 解釋的話,可以把content-type 設定回urlencoded

wx.request({
....
method: "POST",
header: {
"content-type": "application/x-www-form-urlencoded"
},
...
})
登入後複製

Q:wx.uploadFile在手机上返回http码403。

A:安卓的微信升级到6.5.2及其以上版本。

Q:小程序SVG支持吗?

A:image的src放远程svg可以,background-image里也可以。

Q:wx.request返回statusCode两端类型不一致。

A:确实有这个问题,稍后的版本将会修复。

Q:关于组件的动态生成与销毁?

A:不支持动态生成组件,但可以用 wx:for 去渲染多个。

Q:小程序支持热更吗?

A:不支持开发者自行更替。

Q:一些接口的回调IOS和Android不一致,例如支付接口,用户取消支付后,ios只回调complete方法,android则回调fail方法,官方文档也没有任何回调说明,造成开发很困难;类似的还有图片选择接口,分享接口等等。

A:支付接口,用户取消支付后,ios只回调complete方法,android则回调fail方法,问题已记录,多谢反馈。

Q:如果icon已经在服务器上了,想用直接访问网址的方法加载图片进来这样可以吗?

A:不能。

Q:ipad不能使用小程序?

A:暂时不支持ipad打开小程序。

Q:小程序音频视频播放器问题 。1、能够只隐藏进度条跟时间吗?2、现在iOS平台上的时间显示是0:00,但是android上会显示错误码,能够通过什么设置修改吗?

A:1:下个版本会修改这里的交互,不显示进度条和时间。2:6.5.3 版本已修复此问题。

Q:拍照窗口可以加浮层吗?

A:暂时不支持。

Q:开发者工具经常报jsEngineScriptError错误,会导致页面白屏。

A:移步下载最新 0.12.130400 版本的开发工具试试

Q:开发者工具里面,SPA页面,更改title无效。

A:wx.setNavigationBarTitle可以通过 API 改变导航栏标题。

Q:请问小程序页内支持长按保存图片或分享图片吗?

A:目前没有这个功能。

Q:关于swiper中的current问题。如果在新的版本中,直接设current,会产生的效果是:无论从哪个swiper元素点击进去,都会显示swiper第一个子元素的值。

A:目前swiper在处理swiper-item动态变化的情况时有一些bug,会很快修复的。

Q:小程序能引用自己服务器上的wxss和js文件吗?

A:不能,无法执行远程代码。

Q:苹果7,提示内部错误,内存占用过多。

A:页面做的预加载,列表中有图片,图片渲染的太多了,解决办法就是不当屏展示的图片,不让它渲染。

Q:小程序体验者安卓卡在加载页面进不去,IOS可以进去。

A:这是android微信客户端旧版本的bug, 请下载最新版本的 6.5.3 客户端。

Q:请问目前微信小程序支持蓝牙吗?

A:目前不支持。

Q:分享功能真机没有效果?

A:这是android微信客户端旧版本的bug, 请下载最新版本的 6.5.3 客户端。

Q:强制使用https,开发和测试环境下怎么联调和测试?

A:「微信web开发者工具」->「项目」->「开发环境不校验请求域名及TLS版本」。

Q:wx.showToast()方法无效。

调用wx.request请求网络然后在

complete: function (res) {
 
// complete
wx.hideToast();
}
登入後複製

在成功方法里面如果要进行showToast的时候感觉无效,并没有弹出提示框。

A:success 回呼呼叫是在complete 之前的,如果在success showToast,下一步 complete hideToast 就會被沖掉showToast

Q:picker 元件中的文字大小是否支援修改?

A:不支援修改。

Q:tabBar的圖片在android和ios上面大小差異太大。

A:這是android微信客戶端舊版的bug,請下載最新版本的6.5.3 用戶端

Q:tabbar頁面返回問題。非首頁的tabbar 頁面 點選左上角返回箭頭時如何回到小程式首頁? 現在是直接退出小程式了

A:建立新頁面時用navigateTo 才會新建新頁面,同時保留舊頁面,如果用redirectTo 是在當前頁面內跳轉。

Q:問下 wx.request() 怎麼設定成同步。

A:reqeust是發起網路請求。沒有同步介面。

Q:最新mac版工具不可用,進來就出現取得appservice 失敗。

A:工具設定中選擇直接連結網路 。或 系統中的代理軟體設定工具直接連結網路。

Q:真機 view overflow-y下滑會很卡。

A:父層需要 <a href="http://www.php.cn/wiki/902.html" target="_blank">position</a>:relative; 加了之後就不卡了。


以上是微信小程式開發必看的四十個技巧總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

閒魚微信小程式正式上線 閒魚微信小程式正式上線 Feb 10, 2024 pm 10:39 PM

閒魚官方微信小程式悄悄上線,在小程式中可以發布閒置與買家/賣家私訊交流、查看個人資料及訂單、搜尋物品等,有用好奇閒魚微信小程式叫什麼,現在快來看一下。閒魚微信小程式叫什麼答案:閒魚,閒置交易二手買賣估價回收。 1、在小程式中可以發布閒置、與買家/賣家私訊交流、查看個人資料及訂單、搜尋指定物品等功能;2、在小程式的頁面中有首頁、附近、發閒置、訊息、我的5項功能;3、想要使用的話必要要開通微信支付才可以購買;

微信小程式實現圖片上傳功能 微信小程式實現圖片上傳功能 Nov 21, 2023 am 09:08 AM

微信小程式實現圖片上傳功能隨著行動網路的發展,微信小程式已經成為了人們生活中不可或缺的一部分。微信小程式不僅提供了豐富的應用場景,還支援開發者自訂功能,其中包括圖片上傳功能。本文將介紹如何在微信小程式中實作圖片上傳功能,並提供具體的程式碼範例。一、前期準備工作在開始編寫程式碼之前,我們需要先下載並安裝微信開發者工具,並註冊成為微信開發者。同時,也需要了解微信

實作微信小程式中的下拉式選單效果 實作微信小程式中的下拉式選單效果 Nov 21, 2023 pm 03:03 PM

實現微信小程式中的下拉式選單效果,需要具體程式碼範例隨著行動互聯網的普及,微信小程式成為了網路開發的重要一環,越來越多的人開始關注和使用微信小程式。微信小程式的開發相比傳統的APP開發更加簡單快捷,但也需要掌握一定的開發技巧。在微信小程式的開發中,下拉式選單是一個常見的UI元件,實現了更好的使用者操作體驗。本文將詳細介紹如何在微信小程式中實現下拉式選單效果,並提供具

實現微信小程式中的圖片濾鏡效果 實現微信小程式中的圖片濾鏡效果 Nov 21, 2023 pm 06:22 PM

實現微信小程式中的圖片濾鏡效果隨著社群媒體應用程式的流行,人們越來越喜歡在照片中應用濾鏡效果,以增強照片的藝術效果和吸引力。在微信小程式中也可以實現圖片濾鏡效果,為使用者提供更多有趣和創意的照片編輯功能。本文將介紹如何在微信小程式中實現圖片濾鏡效果,並提供具體的程式碼範例。首先,我們需要在微信小程式中使用canvas元件來載入和編輯圖片。 canvas元件可以在頁面

閒魚微信小程式叫什麼 閒魚微信小程式叫什麼 Feb 27, 2024 pm 01:11 PM

閒魚官方微信小程式已經悄悄上線,它為用戶提供了一個便捷的平台,讓你可以輕鬆地發布和交易閒置物品。在小程式中,你可以與買家或賣家進行私訊交流,查看個人資料和訂單,以及搜尋你想要的物品。那麼閒魚在微信小程式中究竟叫什麼呢,這篇教學攻略將為您詳細介紹,想要了解的用戶們快來跟著本文繼續閱讀吧!閒魚微信小程式叫什麼答案:閒魚,閒置交易二手買賣估價回收。 1、在小程式中可以發布閒置、與買家/賣家私訊交流、查看個人資料及訂單、搜尋指定物品等功能;2、在小程式的頁面中有首頁、附近、發閒置、訊息、我的5項功能;3、

使用微信小程式實現輪播圖切換效果 使用微信小程式實現輪播圖切換效果 Nov 21, 2023 pm 05:59 PM

使用微信小程式實現輪播圖切換效果微信小程式是一種輕量級的應用程序,具有簡單、高效的開發和使用特點。在微信小程式中,實作輪播圖切換效果是常見的需求。本文將介紹如何使用微信小程式實現輪播圖切換效果,並給出具體的程式碼範例。首先,在微信小程式的頁面檔案中,新增一個輪播圖元件。例如,可以使用&lt;swiper&gt;標籤來實現輪播圖的切換效果。在該組件中,可以透過b

實作微信小程式中的滑動刪除功能 實作微信小程式中的滑動刪除功能 Nov 21, 2023 pm 06:22 PM

實作微信小程式中的滑動刪除功能,需要具體程式碼範例隨著微信小程式的流行,開發者在開發過程中經常會遇到一些常見功能的實作問題。其中,滑動刪除功能是常見、常用的功能需求。本文將為大家詳細介紹如何在微信小程式中實現滑動刪除功能,並給出具體的程式碼範例。一、需求分析在微信小程式中,滑動刪除功能的實作涉及以下要點:列表展示:要顯示可滑動刪除的列表,每個列表項目需要包

實現微信小程式中的圖片旋轉效果 實現微信小程式中的圖片旋轉效果 Nov 21, 2023 am 08:26 AM

實現微信小程式中的圖片旋轉效果,需要具體程式碼範例微信小程式是一種輕量級的應用程序,為用戶提供了豐富的功能和良好的用戶體驗。在小程式中,開發者可以利用各種元件和API來實現各種效果。其中,圖片旋轉效果是一種常見的動畫效果,可以為小程式增添趣味性和視覺效果。在微信小程式中實作圖片旋轉效果,需要使用小程式提供的動畫API。以下是一個具體的程式碼範例,展示如何在小程

See all articles