當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

微信小程序的基础（一）

發布時間：2023/12/13 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了微信小程序的基础（一）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

微信小程序介紹- 鏈接

微信小程序，簡稱小程序，是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應用

1. 為什么是微信小程序?

微信有海量用戶，而且粘性很高，在微信里開發產品更容易觸達用戶。

推廣app 或公眾號的成本太高。

開發適配成本低。

容易小規模試錯，然后快速迭代。

跨平臺。

2. 微信小程序歷史

2016年1月11日，微信之父張小龍時隔多年的公開亮相，解讀了微信的四大價值觀。張小龍指出，越來越多產品通過公眾號來做，因為這里開發、獲取用戶和傳播成本更低。拆分出來的服務號并沒有提供更好的服務，所以微信內部正在研究新的形態，叫**「微信小程序」** 需要注意的是，之前是叫做 應用號
2016年9月21日，微信小程序正式開啟內測。在微信生態下，觸手可及、用完即走的微信小程序引起廣泛關注。騰訊云正式上線微信小程序解決方案，提供小程序在云端服務器的技術方案。
2017年1月9日，微信推出的“小程序”正式上線。“小程序”是一種無需安裝，即可使用的手機“應用”。不需要像往常一樣下載App，用戶在微信中“用完即走”。

3. 瘋狂的微信小程序

微信月活已經達到10.82億。其中55歲以上的用戶也達到6300萬

信息傳達數達到450億

小程序覆蓋超過200+行業，交易額增長超過6倍，服務1000億+人次,創造出了5000億+的商業價值

4. 還有其他的小程序

支付寶小程序22

百度小程序

QQ小程序

今日頭條 + 抖音小程序

5.官方微信小程序體驗

小程序示例源碼

2準備

1. 注冊賬號

建議使用全新的郵箱，沒有注冊過其他小程序或者公眾號的。
訪問注冊頁面，耐心完成注冊即可。

2. 獲取APPID

由于后期調用微信小程序的接口等功能，需要索取開發者的小程序中的APPID，所以在注冊成功后，可登錄，然后獲取APPID。
登錄，成功后開發 => 開發設置 => 獲取 AppID

3. 開發工具

下載地址
微信小程序自帶開發者工具，集開發預覽調試發布于一身的完整環境。

第一個微信小程序

####1. 打開微信開發者工具

注意第一次登錄的時候需要掃碼登錄

2. 新建小程序項目

3. 填寫項目信息

微信開發者工具介紹

小程序結構目錄

1. 小程序文件結構和傳統web對比

結構傳統web微信小程序

結構	HTML	WXML
樣式	CSS	WXSS
邏輯	Javascript	Javascript
配置	無	JSON

通過以上對比得出，傳統web 是三層結構。而微信小程序是四層結構，多了一層 配置.json

####2. 基本的項目目錄

小程序配置文件

一個小程序應用程序會包括最基本的兩種配置文件。一種是全局的 app.json 和頁面自己的 page.json
注意：配置文件中不能出現注釋

1. 全局配置 app.json

app.json配置
app.json 是當前小程序的全局配置，包括了小程序的所有頁面路徑、界面表現、網絡超時時間、底部 tab 等。

{"pages":["pages/index/index","pages/logs/logs"],"window":{"navigationBarBackgroundColor": "#f00", "navigationBarTextStyle" : "black", "navigationBarTitleText": "小馬哥","navigationStyle" : "default","backgroundColor" : "#0f0","backgroundTextStyle" : "dark","enablePullDownRefresh" : false,"backgroundColorTop" : "#00f", // 窗口頂部背景真機調試僅ios "backgroundColorBottom" : "#f00", // 窗口底部背景真機調試僅ios "pageOrientation": "auto"} }

字段的含義

pages字段 —— 用于描述當前小程序所有頁面路徑，這是為了讓微信客戶端知道當前你的小程序頁面定義在哪個目錄。

window字段 —— 定義小程序所有頁面的頂部背景顏色，文字顏色定義等。

tabBar字段 – 詳見底部 tab 欄

####2. 頁面配置 page.json

page.json
這里的 app.json 其實用來表示該小程序頁面相關的配置
頁面的配置只能設置 app.json 中部分 window 配置項的內容, 頁面中配置會覆蓋 app.json 的 window 中相同的配置項

屬性類型默認值描述

navigationBarBackgroundColor	HexColor	#000000	導航欄背景顏色，如 #000000
navigationBarTextStyle	String	white	導航欄標題顏色，僅支持 black / white
navigationBarTitleText	String		導航欄標題文字內容
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉 loading 的樣式，僅支持 dark / light
enablePullDownRefresh	Boolean	false	是否全局開啟下拉刷新。詳見 Page.onPullDownRefresh
onReachBottomDistance	Number	50	頁面上拉觸底事件觸發時距頁面底部距離，單位為px。詳見 Page.onReachBottom
disableScroll	Boolean	false	設置為 true 則頁面整體不能上下滾動；只在頁面配置中有效，無法在 app.json 中設置該項 (備:類似overflow:hidden)

學小程序

組件
api

常見組件

重點講解小程序中常用的布局組件

view,text,rich-text,button,image,navigator,icon,swiper,radio,checkbox。等

1. view

視圖容器 - 相當于之前的 div
屬性 :
- hover-class 指定按下去的樣式類

<view hover-class="h-class">點擊我試試 </view>

2. text

文本標簽 - 相當于之前 span
特殊用法 :
- 長按文字可以復制 (只有該標簽有這個功能)
  - 設置true 才可以選擇, 手機預覽測試效果
- 可以對空格回車進行編碼

屬性名類型默認值說明

selectable	Boolean	false	文本是否可選
decode	Boolean	false	是否解碼

代碼

//1.1 不可以選擇 <text>測試選擇</text> //1.2 可以選擇 (手機測試) <text selectable='{{ true }}'>測試選擇</text>//2.1 顯示空格失敗 : 結果 => 姓 名 <text>姓 名</text> //2.2 顯示空格成功 : 結果 => 姓名 <text decode'>姓 名</text>//3 其他幾個格式 -- 看圖 <text decode>正&ensp;正@</text> <text decode>正&emsp;正</text> <text decode>正 正</text>

使用場景

3. icon

圖標組件

屬性類型默認值必填說明

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 一起使用

<radio-group > <radio>男</radio><radio>女</radio> </radio-group>

5. checkbox

多選框
需要搭配 checkbox-group 一起使用

<checkbox-group><checkbox>前端</checkbox><checkbox>java</checkbox> </checkbox-group>

6. image

圖標標簽
- image 組件默認寬高 320*240
屬性

屬性名類型默認值說明

src	String		圖片資源地址
mode	String	‘scaleToFill’	圖片裁剪、縮放的模式
lazy-load	Boolean	false	圖片懶加載

mode 有效值：

值說明

scaleToFill	縮放模式，不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素
aspectFit	縮放模式，保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。也就是說，可以完整地將圖片顯示出來。
aspectFill	縮放模式，保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。也就是說，圖片通常只在水平或垂直方向是完整的，另一個方向將會發生截取。

使用場景

scaleToFill : 盒子尺寸和圖片尺寸大小一樣, 使用該模式
aspectFit : 詳情頁頂部顯示圖片 (右)
aspectFill : 列表item 使用該模式 (左)

//鏈接 <view><image mode="aspectFit" src="http://img2.imgtn.bdimg.com/it/u=1668465722,3535501153&fm=214&gp=0.jpg"></image> </view> <view><image mode="aspectFit" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1018718673,2637294948&fm=26&gp=0.jpg"></image> </view>

7. swiper

輪播圖組件
默認寬度 100% 高度 150px

屬性名類型默認值說明

indicator-dots	Boolean	false	是否顯示面板指示點
indicator-color	Color	rgba(0, 0, 0, .3)	指示點顏色
indicator-active-color	Color	#000000	當前選中的指示點顏色
autoplay	Boolean	false	是否自動播放
interval	Number	5000	自動切換時間間隔
circular	Boolean	false	是否循環輪播

swiper
- 滑塊視圖容器
swiper-item
- 滑塊
打開淘寶使用 : m.taobao.com

8. navigator

導航組件類似超鏈接標簽

屬性名類型默認值說明

target	String	self	在哪個目標上發生跳轉，默認當前小程序，可選值self/miniProgram
url	String		當前小程序內的跳轉鏈接
open-type	String	navigate	跳轉方式

open-type 有效值：

值說明

navigate	保留當前頁面，跳轉到應用內的某個頁面，但是不能跳到 tabbar 頁面
redirect	關閉當前頁面，跳轉到應用內的某個頁面，但是不允許跳轉到 tabbar 頁面。
switchTab	跳轉到 tabBar 頁面，并關閉其他所有非 tabBar 頁面
reLaunch	關閉所有頁面，打開到應用內的某個頁面
navigateBack	關閉當前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages() 獲取當前的頁面棧，決定需要返回幾層
exit	退出小程序，target="miniProgram"時生效

9. rich-text

富文本標簽
- 可以將html字符串解析成對應標簽，類似 vue中 v-html功能
通過nodes屬性來實現
接收標簽字符串
接收對象數組

nodes屬性

nodes屬性支持字符串和標簽節點數組

屬性說明類型必填備注

name	標簽名	string	是	支持部分受信任的 HTML 節點
attrs	屬性	object	否	支持部分受信任的屬性，遵循 Pascal 命名法
children	子節點列表	array	否	結構和 nodes 一致

文本節點：type = 'text’

屬性說明類型必填備注

text

文本

string

是

支持entities

代碼

// 標簽字符串str :'<div style="color:red;" >呵呵</div>',// 對象數組str1 : [{name:'div',attrs:{style:"color:red;"},children : [{type:'text',text:'哈哈'}]}]// 使用 <rich-text nodes='{{ str1 }}'></rich-text>

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 圖標
form-type	string		否	用于form組件，點擊分別會觸發 form 組件的 submit/reset 事件
open-type	string		否	微信開放能力

size 的合法值

值說明

default	默認大小
mini	小尺寸

type 的合法值

值說明

primary	綠色
default	白色
warn	紅色

form-type 的合法值

值說明

submit	提交表單
reset	重置表單

open-type 的合法值

值說明

contact	打開客服會話，需要在微信小程序的后臺配置 (演示不了)
share	觸發用戶轉發，
getPhoneNumber	獲取用戶手機號，不是企業的小程序賬號沒有權限來獲取用戶的手機號碼 (演示不了)
getUserInfo	獲取用戶信息，可以從bindgetuserinfo回調中獲取到用戶信息
launchApp	打開APP 需要配合原生app (演示不了)
openSetting	打開授權設置頁
feedback	打開“意見反饋”頁面，需要真機調試

總結

以上是生活随笔為你收集整理的微信小程序的基础（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

编程问答

微信小程序的基础 （一）

微信小程序介紹- 鏈接

1. 為什么是微信小程序?

2. 微信小程序歷史

3. 瘋狂的微信小程序

4. 還有其他的小程序

5.官方微信小程序體驗

2準備

1. 注冊賬號

2. 獲取APPID

3. 開發工具

第一個微信小程序

2. 新建小程序項目

3. 填寫項目信息

微信開發者工具介紹

小程序結構目錄

1. 小程序文件結構和傳統web對比

小程序配置文件

1. 全局配置 app.json

常見組件

1. view

2. text

3. icon

4. radio

5. checkbox

6. image

7. swiper

8. navigator

9. rich-text

10. button

總結

微信小程序的基础（一）