微信小程序的基础 （一）
生活随笔
收集整理的這篇文章主要介紹了
微信小程序的基础 （一）
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
微信小程序介紹- 鏈接
微信小程序，簡(jiǎn)稱小程序，是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想，用戶掃一掃或搜一下即可打開應(yīng)用
1. 為什么是微信小程序?
2. 微信小程序歷史
- 2016年1月11日，微信之父張小龍時(shí)隔多年的公開亮相，解讀了微信的四大價(jià)值觀。張小龍指出，越來(lái)越多產(chǎn)品通過(guò)公眾號(hào)來(lái)做，因?yàn)檫@里開發(fā)、獲取用戶和傳播成本更低。拆分出來(lái)的服務(wù)號(hào)并沒有提供更好的服務(wù)，所以微信內(nèi)部正在研究新的形態(tài)，叫**「微信小程序」** 需要注意的是，之前是叫做 應(yīng)用號(hào)
- 2016年9月21日，微信小程序正式開啟內(nèi)測(cè)。在微信生態(tài)下，觸手可及、用完即走的微信小程序引起廣泛關(guān)注。騰訊云正式上線微信小程序解決方案，提供小程序在云端服務(wù)器的技術(shù)方案。
- 2017年1月9日，微信推出的“小程序”正式上線。“小程序”是一種無(wú)需安裝，即可使用的手機(jī)“應(yīng)用”。不需要像往常一樣下載App，用戶在微信中“用完即走”。
3. 瘋狂的微信小程序
4. 還有其他的小程序
5.官方微信小程序體驗(yàn)
小程序示例源碼
2準(zhǔn)備
1. 注冊(cè)賬號(hào)
-
建議使用全新的郵箱，沒有注冊(cè)過(guò)其他小程序或者公眾號(hào)的。
-
訪問(wèn)注冊(cè)頁(yè)面，耐心完成注冊(cè)即可。
2. 獲取APPID
-
由于后期調(diào)用微信小程序的接口等功能，需要索取開發(fā)者的小程序中的APPID，所以在注冊(cè)成功后，可登錄，然后獲取APPID。
-
登錄，成功后 開發(fā) => 開發(fā)設(shè)置 => 獲取 AppID
3. 開發(fā)工具
-
下載地址
-
微信小程序自帶開發(fā)者工具，集 開發(fā) 預(yù)覽 調(diào)試 發(fā)布 于一身的 完整環(huán)境。
第一個(gè)微信小程序
####1. 打開微信開發(fā)者工具
- 注意 第一次登錄的時(shí)候 需要掃碼登錄
2. 新建小程序項(xiàng)目
3. 填寫項(xiàng)目信息
微信開發(fā)者工具介紹
小程序結(jié)構(gòu)目錄
1. 小程序文件結(jié)構(gòu)和傳統(tǒng)web對(duì)比
| 結(jié)構(gòu) | HTML | WXML |
| 樣式 | CSS | WXSS |
| 邏輯 | Javascript | Javascript |
| 配置 | 無(wú) | JSON |
- 通過(guò)以上對(duì)比得出，傳統(tǒng)web 是三層結(jié)構(gòu)。而微信小程序 是四層結(jié)構(gòu)，多了一層 配置.json
####2. 基本的項(xiàng)目目錄
小程序配置文件
-
一個(gè)小程序應(yīng)用程序會(huì)包括最基本的兩種配置文件。一種是全局的 app.json 和 頁(yè)面自己的 page.json
-
注意：配置文件中不能出現(xiàn)注釋
1. 全局配置 app.json
-
app.json配置
-
app.json 是當(dāng)前小程序的全局配置，包括了小程序的所有頁(yè)面路徑、界面表現(xiàn)、網(wǎng)絡(luò)超時(shí)時(shí)間、底部 tab 等。
字段的含義
####2. 頁(yè)面配置 page.json
-
page.json
-
這里的 app.json 其實(shí)用來(lái)表示該小程序頁(yè)面相關(guān)的配置
-
頁(yè)面的配置只能設(shè)置 app.json 中部分 window 配置項(xiàng)的內(nèi)容, 頁(yè)面中配置會(huì)覆蓋 app.json 的 window 中相同的配置項(xiàng)
| navigationBarBackgroundColor | HexColor | #000000 | 導(dǎo)航欄背景顏色，如 #000000 |
| navigationBarTextStyle | String | white | 導(dǎo)航欄標(biāo)題顏色，僅支持 black / white |
| navigationBarTitleText | String | 導(dǎo)航欄標(biāo)題文字內(nèi)容 | |
| backgroundColor | HexColor | #ffffff | 窗口的背景色 |
| backgroundTextStyle | String | dark | 下拉 loading 的樣式，僅支持 dark / light |
| enablePullDownRefresh | Boolean | false | 是否全局開啟下拉刷新。 詳見 Page.onPullDownRefresh |
| onReachBottomDistance | Number | 50 | 頁(yè)面上拉觸底事件觸發(fā)時(shí)距頁(yè)面底部距離，單位為px。 詳見 Page.onReachBottom |
| disableScroll | Boolean | false | 設(shè)置為 true 則頁(yè)面整體不能上下滾動(dòng)；只在頁(yè)面配置中有效，無(wú)法在 app.json 中設(shè)置該項(xiàng) (備:類似overflow:hidden) |
學(xué)小程序
- 組件
- api
常見組件
重點(diǎn)講解小程序中常用的布局組件
view,text,rich-text,button,image,navigator,icon,swiper,radio,checkbox。等
1. view
- 視圖容器 - 相當(dāng)于之前的 div
- 屬性 :
- hover-class 指定按下去的樣式類
2. text
- 文本標(biāo)簽 - 相當(dāng)于之前 span
- 特殊用法 :
- 長(zhǎng)按文字可以復(fù)制 (只有該標(biāo)簽有這個(gè)功能)
- 設(shè)置true 才可以選擇, 手機(jī)預(yù)覽測(cè)試效果
- 可以對(duì)空格 回車 進(jìn)行編碼
- 長(zhǎng)按文字可以復(fù)制 (只有該標(biāo)簽有這個(gè)功能)
| selectable | Boolean | false | 文本是否可選 |
| decode | Boolean | false | 是否解碼 |
- 代碼
- 使用場(chǎng)景
3. icon
- 圖標(biāo)組件
| type | string | 是 | icon的類型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear | |
| size | number/string | 23 | 否 | icon的大小 |
| color | string | 否 | icon的顏色，同css的color |
- 代碼
4. radio
- 單選框
- 需要 搭配 radio-group 一起使用
5. checkbox
-
多選框
-
需要 搭配 checkbox-group 一起使用
6. image
- 圖標(biāo)標(biāo)簽
- image 組件默認(rèn)寬高 320*240
- 屬性
| src | String | 圖片資源地址 | |
| mode | String | ‘scaleToFill’ | 圖片裁剪、縮放的模式 |
| lazy-load | Boolean | false | 圖片懶加載 |
mode 有效值：
| scaleToFill | 縮放模式，不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素 | |
| aspectFit | 縮放模式，保持縱橫比縮放圖片，使圖片的長(zhǎng)邊能完全顯示出來(lái)。也就是說(shuō)，可以完整地將圖片顯示出來(lái)。 | |
| aspectFill | 縮放模式，保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來(lái)。也就是說(shuō)，圖片通常只在水平或垂直方向是完整的，另一個(gè)方向?qū)?huì)發(fā)生截取。 |
使用場(chǎng)景
- scaleToFill : 盒子尺寸和圖片尺寸大小一樣, 使用該模式
- aspectFit : 詳情頁(yè)頂部顯示圖片 (右)
- aspectFill : 列表item 使用該模式 (左)
7. swiper
-
輪播圖組件
-
默認(rèn)寬度 100% 高度 150px
| indicator-dots | Boolean | false | 是否顯示面板指示點(diǎn) |
| indicator-color | Color | rgba(0, 0, 0, .3) | 指示點(diǎn)顏色 |
| indicator-active-color | Color | #000000 | 當(dāng)前選中的指示點(diǎn)顏色 |
| autoplay | Boolean | false | 是否自動(dòng)播放 |
| interval | Number | 5000 | 自動(dòng)切換時(shí)間間隔 |
| circular | Boolean | false | 是否循環(huán)輪播 |
-
swiper
- 滑塊視圖容器
-
swiper-item
- 滑塊
-
打開淘寶使用 : m.taobao.com
8. navigator
- 導(dǎo)航組件 類似超鏈接標(biāo)簽
| target | String | self | 在哪個(gè)目標(biāo)上發(fā)生跳轉(zhuǎn)，默認(rèn)當(dāng)前小程序，可選值self/miniProgram |
| url | String | 當(dāng)前小程序內(nèi)的跳轉(zhuǎn)鏈接 | |
| open-type | String | navigate | 跳轉(zhuǎn)方式 |
open-type 有效值：
| navigate | 保留當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面，但是不能跳到 tabbar 頁(yè)面 |
| redirect | 關(guān)閉當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面，但是不允許跳轉(zhuǎn)到 tabbar 頁(yè)面。 |
| switchTab | 跳轉(zhuǎn)到 tabBar 頁(yè)面，并關(guān)閉其他所有非 tabBar 頁(yè)面 |
| reLaunch | 關(guān)閉所有頁(yè)面，打開到應(yīng)用內(nèi)的某個(gè)頁(yè)面 |
| navigateBack | 關(guān)閉當(dāng)前頁(yè)面，返回上一頁(yè)面或多級(jí)頁(yè)面。可通過(guò) getCurrentPages() 獲取當(dāng)前的頁(yè)面棧，決定需要返回幾層 |
| exit | 退出小程序，target="miniProgram"時(shí)生效 |
?
9. rich-text
-
富文本標(biāo)簽
- 可以將html字符串解析成 對(duì)應(yīng)標(biāo)簽，類似 vue中 v-html功能
-
通過(guò)nodes屬性來(lái)實(shí)現(xiàn)
- 接收標(biāo)簽字符串
- 接收對(duì)象數(shù)組
nodes屬性
nodes屬性支持 字符串 和 標(biāo)簽節(jié)點(diǎn)數(shù)組
| name | 標(biāo)簽名 | string | 是 | 支持部分受信任的 HTML 節(jié)點(diǎn) |
| attrs | 屬性 | object | 否 | 支持部分受信任的屬性，遵循 Pascal 命名法 |
| children | 子節(jié)點(diǎn)列表 | array | 否 | 結(jié)構(gòu)和 nodes 一致 |
文本節(jié)點(diǎn)：type = 'text’
| text | 文本 | string | 是 | 支持entities |
- 代碼
10. button
<buttontype="default"size="{{defaultSize}}"loading="{{loading}}"plain="{{plain}}" >default </button>| size | string | default | 否 | 按鈕的大小 |
| type | string | default | 否 | 按鈕的樣式類型 |
| plain | boolean | false | 否 | 按鈕是否鏤空，背景色透明 |
| disabled | boolean | false | 否 | 是否禁用 |
| loading | boolean | false | 否 | 名稱前是否帶 loading 圖標(biāo) |
| form-type | string | 否 | 用于form組件，點(diǎn)擊分別會(huì)觸發(fā) form 組件的 submit/reset 事件 | |
| open-type | string | 否 | 微信開放能力 |
size 的合法值
| default | 默認(rèn)大小 |
| mini | 小尺寸 |
type 的合法值
| primary | 綠色 |
| default | 白色 |
| warn | 紅色 |
form-type 的合法值
| submit | 提交表單 |
| reset | 重置表單 |
open-type 的合法值
| contact | 打開客服會(huì)話，需要在微信小程序的后臺(tái)配置 (演示不了) |
| share | 觸發(fā)用戶轉(zhuǎn)發(fā)， |
| getPhoneNumber | 獲取用戶手機(jī)號(hào)，不是企業(yè)的小程序賬號(hào) 沒有權(quán)限來(lái)獲取用戶的手機(jī)號(hào)碼 (演示不了) |
| getUserInfo | 獲取用戶信息，可以從bindgetuserinfo回調(diào)中獲取到用戶信息 |
| launchApp | 打開APP 需要配合原生app (演示不了) |
| openSetting | 打開授權(quán)設(shè)置頁(yè) |
| feedback | 打開“意見反饋”頁(yè)面，需要真機(jī)調(diào)試 |
總結(jié)
以上是生活随笔為你收集整理的微信小程序的基础 （一）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 基于Vue项目打包上线配置
- 下一篇： 小程序基础 （二）