微信小程序官網 - https://mp.weixin.qq.com/cgi-bin/wx
1.創建微信小程序環境
官網下載安裝微信小程序開發工具
若是想用vscode進行安裝 插件-wxml,minapp
安裝完成後,新建小程序
APPid - 若有已經註冊賬號,在微信小程序中進-開發-開發設置-找到
- 若無,可以自動生成測試的APPid
2.微信小程序的文檔結構解析
-Pages --- 小程序的所有頁面
-index
-index.wxss -- index樣式 == css文件
-index.wxml --index結構
-index.js --index行爲
-index.json -- index配置文件
-Utils --- 工具函數文件
-app.js --- 入口文件
-app.json --- 整個項目的配置文件
-app.wxss --- 整個項目的樣式文件
3.小知識點
小程序開發提出了一個新的單位 rpx ,它規定了所有的屏幕都是750rpx
4.常用的xml基本標籤和指令
基本標籤
(1) view - 類似與div
(2)text - 標記文本標籤
(3) button - 按鈕標籤
(4) navigator - 鏈接標籤,可進行跳轉頁面
指令
(1 遍歷 wx:for ,wx:key == v-for :key
(2) 判斷 wx:if == v-if
(3 綁定事件 bind + 事件名 - 會有事件冒泡
catch + 事件名 -阻止事件冒泡
xml文件
<view>
<!-- list爲data中數據,遍歷自動有index,item,item代表遍歷的每一項數據 -->
<view wx:for='{{list}}' wx:key='{{index}}'>
<text>{{item}}</text>
</view>
<view wx:if='{{name == 'aa'}}'>我是aaa</view>
<!-- 鏈接 -->
<navigator url="/pages/list/list"></navigator>
<text>{{name}}</text>
<!-- 綁定事件 -->
<button bindtap = 'changeName'>按鈕</button>
</view>
5.js文件常用屬性
js文件格式
Page({
//用於存放數據 - == vue中的data,在頁面用{{}}顯示
data:{
name:'aaa',
list:[1,2,5,8,10]
},
//方法 - 直接與data同級
changeName(){
//獲取data中的數據
console.log(this.data.name)
//修改data中數據的唯一方式
this.setData({
name:'bbb'
})
},
//頁面一加載就執行這個函數
onLoad:function(options){
//options可以拿到其他頁面傳遞過來的數據
},
// 頁面出現在前臺時執行
onShow(options){},
// 頁面從前臺變爲後臺時執行
onHide(options){}
})
常用的api
(1) wx.login _ 登錄時候獲取權限
小程序登錄流程
通過wx.login獲取微信官方給與的登錄憑證(code)=》將code通過後臺登錄接口發送後臺
=》後臺會返回一個類似於token的東西openid =》存儲到持久化中(wx.setStorageSync)
wx.login({
success (res) {
if (res.code) {
//發起網絡請求
wx.request({
url: 'https://test.com/onLogin',
data: {
code: res.code
}
})
} else {
console.log('登錄失敗!' + res.errMsg)
}
}
})
(2)路由跳轉
wx.navigateTo({
url: 'test?id=1',})
(3)顯示數據未顯示時候轉圈圈效果 - 一般用於請求後臺數據未返回時
wx.showLoading({
title: '加載中',
})
setTimeout(function () {
wx.hideLoading()
},
(4) 輕提示-一閃而過
wx.showToast({
title: '加載中',
})
(5)小程序請求後臺
wx.request({
url: 'test.php', //僅爲示例,並非真實的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默認值
},
success (res) {
console.log(res.data)
}
})
注意事項:報錯:不在一下request合法域名列表
小程序裏面發送接口時。必須使用https協議也不是http
在開發設置中,在開發工具中設置不去檢測請求協議
6.配置文件
-app.js
所有的頁面路徑都要在這裏配置,第一元素代表首頁路徑
-"pages":["pages/detail/detail"]
設置小程序的狀態欄,導航欄,標題,窗口背景色
-"window"
用來配置底部的切換欄目
-"tabBar":{
"list":[
{
"pagePath": "pages/index/index",
"text": "首頁"
}, {
"pagePath": "pages/logs/logs",
"text": "日誌"
}]
}
-單頁面的配置
微信小程序-框架-頁面配置
"navigatorBarBackGroundColor": "#fff"
"navigatorBarTitleText": "首頁"
7.使用模板
作用:抽取若干頁面的公共結構和樣式(一般不包含複雜邏輯)
使用:
(1)模板 - 與Pages同級
新建文件夾- templates (模板存放位置)
-myTemp.wxml
//name-區分模板的名字
<template name='atemp'>
<view class='testTemp'>sss</view>
</template>
-myTemp.wxss
.testTemp {
color:red
}
(2)引入
wxml -
<import src=''></import>//寫路徑
//is - 確定是哪個模板
<template is='atemp'></template>
wxss
@import '路徑';