iOS碼農的微信小程序開發(fā)總結

最近公司需要一個微信小程序demo去給客戶看,就研究了幾天。

下面就說說開發(fā)微信小程序的時候遇到的一些問題,對于小程序的開發(fā)教程就不細說了,很多人都寫的比我好。下面就說一些我個人覺得比較實用的。

快速創(chuàng)建頁面

剛開始開發(fā)小程序的時候,一個個創(chuàng)建對應頁面的js、json、 wxml、 wxss文件是很痛苦的,后面才發(fā)現在全局配置文件app.json中直接配置,然后 Ctrl+S 就會自動生成對應的目錄文件了,如下圖所示。

Ctrl+S 就會自動生成對應的目錄文件

全局的tabBar 和navigationBar配置

1. 全局的tabBar屬性和navigationBar屬性要盡量配齊。如果沒有配齊,在不同版本的微信中,可能會出現不同的情況。比如tabBar的背景顏色可能有默認顏色,可能沒有默認顏色,具體對應微信哪些版本,我并沒有去測試。

2.全局文件的顏色配置只支持16進制,不支持像red這種。


盡量使用最新版本的微信測試

在一些相對較舊版本的微信中,當你使用了較新的API時,在真機中有可能出現事件不響應,而微信小程序又不能真機調試,這時候就坑爹了,不知道出現什么原因,模擬器運行又沒有問題。所以當你測試真機的時候出現了莫名其妙的問題時,你可以看看當前版本的微信是否時最新的。

一般在安卓機測試是比較少問題的,安卓機使用的是QQ的內核。而iOS就比較坑了,在不同的機型上也會有點問題,目前在布局上,遇到i5 ?9.0系統(tǒng)出現了布局不規(guī)范,暫時還沒有找到原因。

wx.showToast 提示框

目前微信的showToast都一定會帶著圖片,假如知道怎么去掉圖片的同學,請告知一下。

動態(tài)設置屬性

動態(tài)設置屬性格式

Flex布局模式

骰子布局

網格布局主要依賴flex屬性

百分比布局

流式布局

代碼在 https://github.com/icindy/wxflex90??

感謝WeAppDev的分享。博客地址 https://weappdev.com/t/flex-wxflex/144/2

閉包概念

var that = this? 的使用。js和swift一樣存在閉包,當我們在一個自定義方法內使用了wx.request()時,假如用到了外部data的數據時,就需要var that = this,從而使用data的數據。

template 模版

在模版中定義代碼片段,然后在需要時調用.微信小程序的模版可以用name屬性作為標記,在頁面中使用<template is="模版name名稱" ... ?這樣就可以使用了。

支持import和include

import引用是有作用域,只能引用當前指向文件中的template

include相當于復制,會復制template里面的全部內容,但是不包含template


支持import和include

每個頁面的XXX.js不能為空,否則下面會出現? 1. Forgot to add page route in app.json. 2. Invoking Page() in async task. 的錯誤


條件渲染:主要是wx:if 和 block wx:if?

列表渲染 : wx:for

wx:for 綁定的是一個數組,數組當前的下標變量名默認為index,數組當前的變量名為item。使用wx:for-item就可以指定數組當前元素的變量名,wx:for-index可以指定數組當前下標的變量名,wx:for如果嵌套的話,就需要改變默認框架定義的名稱。

調試工具

wIxml panel :在調試中可以看到真實的頁面結構以及結構對應的 wxss 屬性,也可以修改對應 wxss 屬性,在模擬器中實時看到修改的情況

Sources panel :其實就是拿來斷點的。

Network panel :可以看到請求的詳細情況。

App data panel :可以看到當前頁面的實時數據,也可以實時修改頁面上的數據。

Storage panel ?: 用于顯示當前項目的使用 wx.setStorage 或者 wx.setStorageSync 后的數據存儲情況。

Console panel : 可以輸入和調試代碼

附上官方文檔 : https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/debug.html#console-panel

最后建議還未學或者剛開始學的同學看一下 微信小程序的 Q&A 文檔,比如? background-image:可以使用網絡圖片,或者 base64,或者使用? 等等一些小知識點,都是開發(fā)中挺實用的? 附上網址 https://mp.weixin.qq.com/debug/wxadoc/dev/qa/qa.html?t=20161122

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 昨天看了一下微信小程序官方文檔,總結一下自己學習的個人心得. 首先從官方文檔給的框架說起,微信小程序官方文檔給出了...
    Mr大大大閱讀 47,510評論 9 68
  • 微信小程序在無論在功能、文檔及相關支持方面,都是優(yōu)于前面幾種微信賬號類型,它提供了很多原生程序才有的接口,使得我們...
    未央大佬閱讀 2,397評論 0 12
  • WXML WXML(WeiXin Markup Language)是微信的一套標簽語言,結合基礎組件、事件系統(tǒng),可...
    許劍鋒閱讀 7,284評論 3 51
  • 給提問的開發(fā)者的建議:提問之前先查詢 文檔、通過社區(qū)右上角搜索搜索已經存在的問題。 寫一個簡明扼要的標題,并且...
    極樂叔閱讀 14,622評論 0 3
  • 秋風解落葉,紛紛化蝶飛。 孩童手執(zhí)帚,遍遍掃秋葉。 忽有秋風起,不憐人辛苦。 稚童無奈何,欲執(zhí)斧除根。
    井溢閱讀 367評論 0 1

友情鏈接更多精彩內容