微信小程式開發的四十個技術訣竅總結

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

前言

微信「小程式」正式上線一週時間，相關話題持續升溫。支付寶開發「小程式」的訊息也隨即曝出，網路巨頭們摩拳擦掌，不少網友調侃說，這勢頭感覺要挑戰現有的「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.redirectTo

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

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

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

#A：background-image
：可以使用網路圖片，或者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.setData

進行操作才能將資料同步到頁面中進行渲染怎麼獲取使用者輸入

能夠取得使用者輸入的元件，需要使用元件的屬性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/json
'

如果伺服器沒有用到json解釋的話，可以把
content-type

設定回

urlencoded。

<pre class='brush:php;toolbar:false;'>wx.request({ .... method: &quot;POST&quot;, header: { &quot;content-type&quot;: &quot;application/x-www-form-urlencoded&quot; }, ... })</pre>
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：父层需要 position:relative; 加了之后就不卡了。

总结

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