1.學(xué)習(xí)資料相關(guān)
1.文檔
| 名稱 | 描述 |
|---|---|
| 小程序開發(fā)指南 | 通過9章全面介紹小程序環(huán)境搭建到使用發(fā)布 |
| 微信開放文檔小程序 | 學(xué)習(xí)新東西最好的方式就是官方文檔，建議快速瀏覽一遍，然后開發(fā)中要用到的再查。 |
| 微信組件示例 | 快速查看組件樣式顯示 |
| flex伸縮布局 | flex布局全面介紹 |
| Promise | 高級進(jìn)階：深度揭秘 Promise 注冊微任務(wù)和執(zhí)行過程 |
| 自定義組件 | 【官】自定義組件指南,【官】自定義組件官方文檔 |
2.學(xué)習(xí)視頻推薦
bilibili微信小程序/零基礎(chǔ)/教程
【W(wǎng)EB前端】零基礎(chǔ)玩轉(zhuǎn)微信小程序
3.工具環(huán)境
| 名稱 | 描述 |
|---|---|
| 下載地址 |
開發(fā)工具》穩(wěn)定版 Stable Build：我下載的wechat_devtools_1.03.2010240_x64.exe
|
| 云開發(fā) | 微信開放文檔》云開發(fā)，云開發(fā)開發(fā)微信小程序、小游戲，無需搭建服務(wù)器 |
| 四大模塊 | 1.JSON-配置,2.WXML-模板,3.WXSS-樣式4.JS-邏輯交互 |
| 運(yùn)行環(huán)境 | 1.渲染層：其中 WXML 模板和 WXSS 樣式工作在渲染層，2.邏輯層：JS 腳本工作在邏輯層。 |
| 與HTML區(qū)別 | 1.簽必須是嚴(yán)格閉合的，否則會導(dǎo)致編譯錯誤。2.區(qū)分大小寫 |
| 列表渲染 | 默認(rèn)數(shù)組的當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為 index，數(shù)組當(dāng)前項(xiàng)的變量名默認(rèn)為 item |
| 引用 | 1.import引入模板template,且不具又傳遞性2.include可以將目標(biāo)文件中除了 <template/> <wxs/> 外的整個代碼引入 |
| WXSS引用 | 官方樣式庫 weui |
| 小程序中的JavaScript | 同瀏覽器中的JavaScript 相比沒有 BOM 以及 DOM 對象，所以類似 JQuery、Zepto這種瀏覽器類庫是無法在小程序中運(yùn)行起來的，同樣的缺少 Native 模塊和NPM包管理的機(jī)制，小程序中無法加載原生庫，也無法直接使用大部分的 NPM 包 |
4.其他知識必備
HTML+CSS學(xué)習(xí):https://www.w3school.com.cn/
ES5和ES6學(xué)習(xí)
Promise學(xué)習(xí)
2.小程序的一些限制：
| 名稱 | 描述 |
|---|---|
| 頁面堆棧個數(shù) | 整個小程序只有一個 App 實(shí)例，是全部頁面共享的，更多的事件回調(diào)參考文檔 注冊程序 App 。 |
| 線程管理 | 小程序的渲染層和邏輯層分別由2個線程管理：渲染層的界面使用了WebView 進(jìn)行渲染；邏輯層采用JsCore線程運(yùn)行JS腳本 |
| 推送消息 | 無法實(shí)現(xiàn)消息推送功能，說是為了不打擾用戶 |
| 代碼大小 | 小程序超過1M，不允許上傳 |
| 存儲空間 | 同一個微信用戶，同一個小程序 storage 上限為 10MB，單個key 允許存儲的最大數(shù)據(jù)長度為 1MB，所有數(shù)據(jù)存儲上限為 10MB
|
| 插件個數(shù) | 最多使用5個插件 |
| 顏色配置 | 很多地方的顏色都只能黑或白，比如window的navigationBarTextStyle，比如tabBar的borderStyle
|
3.開發(fā)路程遇到的問題
1.平臺賬號相關(guān)
平臺區(qū)分？
微信公眾平臺mp.weixin.qq.com：服務(wù)號，訂閱號，小程序，企業(yè)微信（原企業(yè)號）
小程序后臺地址：https://mp.weixin.qq.com/wxamp/home/guide?token=391031398&lang=zh_CN
微信開放平臺open.weixin.qq.com：移動應(yīng)用開發(fā)，網(wǎng)站應(yīng)用開發(fā)，公眾帳號開發(fā)，第三方平臺開發(fā)
注冊小程序
作為登錄帳號，請?zhí)顚懳幢晃⑿殴娖脚_注冊，未被微信開放平臺注冊，未被個人微信號綁定的郵箱
進(jìn)入小程序后臺?
我開了微信小店，所以登錄就直接進(jìn)入了微信小店，而微信小店的小程序是沒有后臺管理那一套的
于是我從新用另一個郵箱注冊了一個新的微信小程序賬號，然后登錄小程序后臺:https://mp.weixin.qq.com/wxamp/home/guide?token=391031398&lang=zh_CN
2.網(wǎng)絡(luò)相關(guān)
沒有設(shè)置request域名?
解：小程序后臺-開發(fā)-開發(fā)管理-開發(fā)設(shè)置-服務(wù)器域名，里面填寫自己的服務(wù)器域名（每月可修改50次），這樣開發(fā)的小程序才能訪問你的服務(wù)器域名來獲取數(shù)據(jù)
【微信小程序】網(wǎng)絡(luò)請求接口封裝實(shí)例
3.tabBar相關(guān)
如何設(shè)置里面的圖片大小,文字大小，頂部線條 "borderStyle": "black", 顏色?
解：無法設(shè)置圖片文字大小，borderStyle只有自己去自定義 tabBar
4.text相關(guān)
如何文字水平垂直居中顯示
text{
width: 200rpx;
height: 80rpx;
color: #3B77FF;
background-color: #3b76ff21;
border-radius: 40rpx;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
font-size: 26rpx;
}
5.token如何添加
常規(guī)的添加token總是不成功
https://blog.csdn.net/dlmmu/article/details/102947577
搞了半天，原來是自己的bug,封裝了兩個網(wǎng)絡(luò)請求一直走的另一個請求
6.定時器setInterval
https://blog.csdn.net/yechaoa/article/details/81985664
7.頂部TabBar
小程序?qū)崿F(xiàn)頂部tab切換
微信小程序選項(xiàng)卡切換+導(dǎo)航欄頂部懸浮
8.動畫
9.布局
- 使內(nèi)部控件居中：
display:flex;
justify-content:center;
- 使內(nèi)部控件居右側(cè)：
display:flex;
flex-direction:row-reverse;
width:100%;
text-align:right;
-
微信小程序設(shè)置padding-right和margin-right無效使用
box-sizing
width:100%;
box-sizing:border-box;
padding:33rpx;
- Tab懸浮在頂部：
position:fixed;
top:0;
位置定位position詳解
九宮格布局
微信小程序?qū)W習(xí)之flex布局實(shí)例篇
微信小程序--布局基礎(chǔ)&樣式基礎(chǔ)
10.圖片
微信小程序設(shè)置背景圖片
image占位圖通過三目運(yùn)算符，異常加載圖通過
//WXML
<image class="iv_avatar" src="{{user.avatar}}" binderror="loadImgErr"/>
//js
loadImgErr(e){
let errorurl = '/images/icon_selected_tab3.png'
this.setData({
user:{avatar:errorurl}
})
11.點(diǎn)擊事件
循環(huán)控件點(diǎn)擊事件
//wxml
<view class="tui-col-3" wx:for="{{tabs}}" wx:key="this" data-key="{{index}}" bindtap="onTabClick">
<image src="{{item.icon}}" style="width:60rpx;height:60rpx"/>
<view>{{item.name}}</view>
</view>
//js
onTabClick(e){
var that =this;
var obj = that.data.tabs[e.currentTarget.dataset.key];
wx.showToast({
title: obj.name,
})
}
12.數(shù)據(jù)
- 小程序調(diào)用本地json文件數(shù)據(jù)
- 點(diǎn)擊事件數(shù)據(jù)傳遞后面全小寫，用
-連接data-province-id="1681"不能data-provinceId="1681"，接收的時候provinceId才有值
13.彈出框
14.事件傳值
15.通知廣播
16.分享到個人和朋友圈
【官】監(jiān)聽用戶點(diǎn)擊頁面內(nèi)轉(zhuǎn)發(fā)按鈕-分享小程序頁面到個人和朋友圈
2018.3簡書：微信小程序之分享功能
定義全局分享
微信小程序?qū)崿F(xiàn)分享至朋友圈的功能來啦-暫僅在Android平臺支持
17.關(guān)鍵字解釋
微信小程序中Var、Let、Const用法詳解
var:全局變量
let:局部變量
const:常量
18.引入
引入其他樣式到本wxss中
@import "../../component/css/item_job.wxss"
引入其他工具到本js中
const http = require('../../utils/httpUtils')
19.自定義組件
- 【官】自定義組件官方文檔
- 小程序自定義組件之popupwindow
-
微信小程序彈窗組件
大意導(dǎo)致Cannot read property 'showPopup' of null，原來是搞忘記了其中的第三步，json配置導(dǎo)入自定義組件
{
"usingComponents": {"popup": "/component/popup/popup"}
}
- 坑1：在模擬器中可以，真機(jī)調(diào)式出現(xiàn)路徑錯誤
Component is not found in path '...',仔細(xì)檢查路徑是正確的，
原來要在自定義組件的json中配置"component": true參考：微信小程序——自定義組件時，編譯報(bào)錯的評論
20.渲染層網(wǎng)絡(luò)層錯誤
圖片地址錯誤，導(dǎo)致圖片下面的控件關(guān)聯(lián)數(shù)據(jù)顯示不出來！原因：數(shù)據(jù)模型都是來之user，里面包含了頭像和名稱，因?yàn)轭^像地址錯誤，導(dǎo)致名稱也加載不來出來了，最好的處理的方法就是user中的頭像參數(shù)分離出來，而不要用{{user.avatar}}的方式賦值，直接{{avatar}},這樣avatar有錯，不至于影響user里面其他正常參數(shù)的顯示
data: {
isLogin:false,
user:{},
avatar:'/images/icon_unselected_tab3.png',
}
21.下拉刷新白色，看不見
原因：在json中涉資了背景白色，去掉即可，在wxml中控制背景色
"backgroundColor": "#fff",
22.組件穿透
- 組件穿透
方法一：把view換成cover-view、image換成cover-image【模擬器無效，真機(jī)有效】
方法二：把view換成cover-view、image換成cover-image且動態(tài)樣式里加上z-index:999;【模擬器真機(jī)都有效】 - 滾動穿透
方法一：在彈窗標(biāo)簽上添加屬性：catchtouchmove="true"【無效】說沒有true方法
方法二：在彈窗標(biāo)簽上添加屬性：catchtouchmove="move"，并在頁面中定義一個空的move方法move:function(){},【模擬器無效，真機(jī)有效】
持續(xù)更新中...
