微信小程序
2.4:微信公衆平臺-小程序(重點)css
微信通信產品:騰訊公司(超過10億用戶)
BATJ(百度/阿里/騰訊/京東)
微信公衆平臺(訂閱號/小程序/小遊戲)
訂閱號:我的媒體平臺(文章/音頻/視頻)
微信小程序:中小企業和我的(輕量級app)html
2.5:微信公衆平臺--小程序(重點)-註冊賬戶
(1)微信公衆平臺
https://mp.weixin.qq.com/
(2)當即註冊
訂閱號 服務器 (*)小程序 企業微信前端
(3)郵箱(沒有在微信平臺使用訂閱號小程序....）java
(4)註冊主體類型
-企業和機構
(1)上傳企業基本信息加蓋公章圖片清晰
(2)主體類型不能修改
(3)微信支付/卡包/附近小程序-面向企業
-我的node
2.6:微信公衆平臺-小程序(重點)-登陸mysql
https://mp.weixin.qq.com/
(1)郵箱/密碼jquery
(2)左側菜單開發選項 點擊。
(3)開發設置 點擊
(4)appid:小程序密鑰android
(5)左側菜單:版本管理
開發版本-->審覈版本->線上版本git
2.7:微信公衆平臺--小程序(重點)-下載開發者工具
(1)微信開發工具下載地址https://developers.weixin.qq.com/miniprogram/dev/devtools/download.htmlgithub
(2)安裝下一步
(3)用手機微信掃二維進入工具
(4)建立項目
2.8:微信公衆平臺-小程序(重點)-工具
雲開發:開通雲開發->打開雲開發管理界面
編譯:將全部代碼從新編譯執行最新結果
預覽:將代碼上傳微信服務器,使用手機微信掃描看到程序結果
上傳:將項目上傳微信服務器[開發版本]
詳情:項目詳細
(1)調試基礎庫
注意事項:每個小程序項目不能超過2MB
2.9:微信公衆平臺-小程序(重點)-目錄結構
2.10:微信公衆平臺-小程序(重點)-如何建立頁面
exam01/
exam01.wxml 相似html
exam01.WXss 相似css
exam01.json 配置文件
exam01.js 相似js
2.11:微信公衆平臺--小程序(重點)-wxm|
小程序wxml微信xml
#嚴格匹配置開始結束標籤
常見標籤
view 至關於<div> #塊級元素
text 至關於<span> #行內元素.
image 至關於<img src="" />
form 至關於<form></form>p
...
常見錯誤：
(!)expect end-tag `text` 缺乏結束標籤
(2)模擬器沒有任何內容關閉網絡防火牆
(3)輸入中文不成功關 閉開發工具再啓動
(1)文本標籤
<text selectable="true"> </text>
selectable="true"
文本的內容能夠複製
(2)圖片
<image src=" 1.jpg" lazy-load='true'></image>
lazy-load='true'懶加載:等 待圖片下載成功後再顯示
圖片內容
圖片默認320*240圖片
2.12:微信公衆平臺--小程序(重點)-wxss
wxss是一套用於小程序的樣式語言,功能描述組件
(1)單位:rpx(responsive pixel)響應式像素,能夠根據屏幕
寬度自適應調用圖片文字容器大小
圖片默認320* 240圖片
2.12:微信公衆平臺--小程序(重點)-wxss
WXSS是一套用於小程序的樣式語言,功能描述組件
(1)單位:rpx(responsive pixel)響應式像素,能夠根據屏幕寬度自適應調用圖片文字容器大小
(2)引入外部樣式文件@import "./base.wxss"
2.13:微信公衆平臺-小程序(重點)-rpx
問題:移動端開發你使用哪一個像素
-前端設計師:設計稿圖片 物理像素
-前端開發:css 邏輯像素
示例:iphone6(2)/iphone plus(3)
邏輯像素* dpr=物理像素
iphon6 375px* 2= 750
iphon6plus ?
小程序解決方案: rpx響應式像素
(iphone6) 750rpx邏輯像素=== 750物理像素
2.14:微信公衆平臺-小程序(重點)-引入其它樣式文件
#將項目公衆樣式內容統一保存在 一個文件中
style/common.WXSS
exam01.WXSS
@import 「../style/common/wxss"
#引入其它樣式文件必定用相對路徑
#小程序開發文檔
2.15:微信公衆平臺-小程序(重點)-第三方組件庫(樣式庫)
-小程序開發文檔
https://developers.weixin.qq.com/miniprogram/dev/framework/
Vannt Weapp -有贊團隊開發樣式(項目)
https://youzan.github.io/vant-weapp/#/ 小程序
-WeUI
-iview Weapp
2.16:微信公衆平臺-小程序(重點)-配置文件
project.config.json 項目配置文件
app.json 項目全局配置文件
exam01.json 組件配置文件
--app.json 全局配置文件
#若是一個選項添加app.json全部組件當即生效
"pages":[] 組件列表
[
"pages/exam01/exam01"，#默認 顯示第一個組件
" pages/exam02/exam02"
]
"window":}全局窗口配置
"navigationBarBackgroundColor"': "#F00", 導航條背景
"navigationBarTitleText'": "學子商城"， 導航條文本
"navigationBar TextStyle'"': "black" 導航條文本顏色(只能選黑白）
"tabbar":{} 底部導航欄
#注意事項:圖標不能使用網絡路徑只有本地路徑
#注意事項:按鈕最少二個
2:今天的目標
3.1:微信公衆平臺--小程序--js/事件
-小程序中js與網頁程序中js有區別
(1)ECMA基本類型:string;number;boolean;undefined;null
(2)ECMA對象:Date;Math;RegExp;Array;Function....
(3)DOM/BOM不能使用
(4)小程序頂級對象 wx 至關於網頁js中window
#經過小程序文檔[API]查看全部組件
-js特殊文件
(1) 全局js app.js 全局共享數據
(2) 當前組件js base.js 當前組件使用
Page({})當 前組件對象包括[事件/方法/data]
如何顯示data中數據 {{msg}}
3.2:微信公衆平臺--小程序-js/事件數據顯示控制
(1)循環
<view wx:for="{{數組名稱}}" wx:key="index">
{{item}} 當前對象
{{index}} 當前元素下標
</view>
#wx:for="{循環數組名稱}"
#wx:key="index"數組元素下標(排序規則) 快速排序
(2)if
<view wx:if="{{condition}}">xxx</view>
condition:表達式true false
true 當前元素正常顯示
false 當前元素刪除
(3)if else
<view wx:if="{{condition}}"> </view>
<view wx:elif="{{condition}}"></view>
<view wx:else></view>
(4)hidden
<view hidden="{{condition}}">內容</view>
true 隱藏 false 顯示
問題:何時使用if何時使用hidden
(1)若是此元素須要頻繁切換使用hidden
(2)若是此元素在運行中不大可能改變則wx:if 較好
3.3:微信公衆平臺--小程序-js/事件-事件
pc端項目屏幕寬度 > 970px操做:鼠標鍵盤
移動端項目屏幕寬度<970px 操做:手指
移動端項目:
-touchstart 當手指碰屏幕時發生事件無論幾個手指
-touchmove當手指在屏幕上滑動邊續觸發
-touchend 當手指離開屏幕時觸發
zepto.js -至關於移動端jquery
tap 觸碰一次
longtap 長按一次超過350ms
swipe 滑動
swipeLeft 左滑
3.4:微信公衆平臺-小程序--js/事件事件
小程序事件分爲二種
(1)冒泡事件:當一一個組件.上事件被觸發後，該事件向父元素傳遞
(2)非冒泡事件:當一個組件.上事件被觸發後，不向父元素傳遞
小程序綁定事件方式
-支持事件冒泡
<view bind事件名="事件處理函數"></view>
-不支持事件冒泡
<view catch事件名="事件處理函數"></view>
3.x:微信公衆平臺-小程序-生命週期（指組件的生命週期）
組件生命週期:一個組件從建立開始到使用最後銷燬過程
onLoad :組件建立成功後觸發一次
(1)發送ajax請求
(2)獲取傳遞參數onLoad(options)
(4)onReady :組件渲染成功後觸發一次
onShow :顯示組件屢次
onHide :隱藏組件屢次
onUnload :銷燬
3.6:微信公衆平臺--小程序-特殊事件
(1) onPullDownRefresh 用戶下拉操做[刷新操做]
(2) onReachBottom 用戶上拉觸頂[下一頁]
#默認小程序禁止用戶下拉操做
#修改默認行爲
-全局修改: app.json
window:{
"enablePullDownRefresh":false #禁 止用戶下拉操做
}
-當前組件修改: base.json
enablePullDownRefresh": true
4.1:微信公衆平臺-小程序--雲開發 三個基礎內容
-雲數據庫:數據增長/刪除/修改/查詢....
-雲存儲:上傳文件/下載文件/分享文件/管理文件
-雲函數:獲取appid/調用高級權限操做
4.2:微信公衆平臺--小程序-開通雲開發
小程序開發工具-->"雲開發"開通
環境名稱:[........]英文數字
環境id:[]自動生成複製下來
#免費環境
-5GB 雲數據庫
-2GB雲存儲
-CDN流程5GB/月
4.3:微信公衆平臺--小程序--雲數據庫(mongodb nosq|數據庫)
雲開發提供-一個JSON數據庫提供2GB免費空間
| 關係型數據庫 | 文檔型數據庫 |
| 數據庫database | 數據庫database |
| 表table | 集合collection |
| 行row | 記錄record/doc |
| 列column | 字段field |
#關係型數據庫(mysql):適合複雜數據關係企業內 部軟件系統
#文檔型數據庫(mongodb):數據關係簡單頻繁查詢,更新app
mongodb nosq|數據庫：
| 數據類型 | |
| string字符串 | Number數字 |
| Object對象 | Array數組 |
| Bool布爾 | GeoPoint地理位置點 |
| Date時間(客戶端) | NULL |
4.4:微信公衆平臺--小程序--雲數據庫操做
(1)控制檯：
(2)雲函數
(3)小程序操做
4.5:微信公衆平臺--小程序操做雲數據庫
(1)經過控制檯:建立集合web1903
(2)初始化默認雲數據庫
const db = wx.cloud.database();
(3)向集合中添加新記錄
db.collection("集合名稱").add(
{
data:{name:"文華",age:60},
success:function(res){},
fail:function(err){}
}
)
add()向集合中添加數據
data:{}數據
success添加成功回調函數
fail 添加失敗回調函數
示例：建立新組件pages/db/db
常見錯誤:
(1) -502005 database collection not exists
#集合不存在 web1903
緣由1:拼寫錯誤db.collection("拼寫錯誤")
緣由2:沒有集合
(2)若是建立二個環境
const db = wx.cloud.database({
env:"環境id"
});
env：環境
(3) errCode: -501005 invalid env
緣由:env:"環境id錯誤"
示例：
1:控制檯建立集合web1903user
添加pages/db/db/ button
完成向web1903user集合添加一條記錄
4.6:微信公衆平臺--小程序操做雲數據庫-更新
db.collection("集合名稱").doc("當前記錄id'").update({
data:{
屬性名:值
}
}).then(res=>{
console.log(res)；
}).catch(err=>{
console.log(err);
})
doc() #當前記錄id
update#更新數據
4.7:微信公衆平臺--小程序操做雲數據庫--刪除
db.collection("集合名稱").doc(記錄id)
.remove().then(res=>{).catch(err=>{})
#注意事項:經過小程序一次只能刪除--條數據
示例：
(1)建立集合i web1903emp[員工集合]控制面板
(2)經過小程序
2.1:向集合添加員工信息
{no:1,name:"tom",sal:3000}
{no:2,name:"jerry",sal:7000}
{no:3,name:"kaka",sal:6000}
2.2:更新第一條記錄sal 3500
2.3:刪除最後一條記錄
2.2:小程序雲開發-雲數據庫--查詢
(1)查詢全部數據
db.collection("集合名稱").get().then(res=>{}).catch(err=>{})
get:獲取查詢
then:查詢成功後獲取返回內容
res 查詢結果
catch: 查詢失敗
err 失敗緣由
(2)查詢指定數據
dbcollection("集合名稱").where({name:"erry"})
.get().then(res=>/{).catch(err=>{})
where查詢條件
get獲取查詢
then查詢成功後獲取返回內容
res查詢結果
示例：實現web1903emp集合查詢與刪除操做
1:當組件建立成功後查詢web1903emp集合中全部記錄
2:將記錄顯示網頁模板
data:{list:[]}
在小程序中將數據保存data有一個專用方法
this.setData({
屬性名:新值
});
3:在網頁模塊每一條記錄加一個按鈕<button></button>
4:爲button綁定點擊事件/刪除指定記錄
2.2:小程序雲開發-雲函數
雲函數:特殊函數將其保存小程序雲上(騰訊雲)
雲函數從功能不少優勢:權限高完成複雜操做
演示三個示例
(1)求和雲函數sum()
(2)獲取當前登陸用戶openid
(3)批量刪除雲數據庫中數據(ES7語法)
2.3:小程序雲開發-雲函數-求和函數
#注意事項:開發雲函數要求本地下載安裝nodejsv8.0以上
(1)開發工具coludfunctions
鼠標右鍵->新建雲函數
(2)雲函數名稱:sum
(3)打開index.js
(4)添加雲函數代碼
exports.main = async(event,context)=>{
return {
sum:event.i + event.j
}
}
exports導出 event事件對象(獲取用戶參數)
main主函數 context 上下文對象(獲取用戶信息).
async導步(ES7語法)
(5)上傳部署
建立並部署,雲端安裝依據
(6)測試雲函數
(7)在小程序中調用開發雲函數
wx.cloud.callFunction({ //調用雲函數
name:"雲函數名", //雲函數名
data:{i:1j:2} //參數
}).then(res=>{ //調用成功
console.log(res);
}）
#注意事項:若是你舊版本小程序工具沒有server-sdk報錯
#右擊countFunctions 在終端中打開
#npm install --save wx-server-sdk@latest
常見錯誤
(1) Error: errCode: -404011 cloud function execution error
緣由:
-調用雲函數不存在
-調用去函數沒有上傳
-雲函數名子拼寫錯誤
2.4:小程序雲開發雲函數-login登陸（此函數自帶）
調用此雲函數返回不少登陸用戶信息
openid
頭像
性別
....
2.5:小程序雲開發-雲函數批量刪除 batchDelete03
雲數據庫web1903emp同名記錄name:"kaka"
雲函數目的:刪除name:"kaka"
async:異步ES7異步執行函數
await:等待若是執行耗時任務啓動關鍵字等待任務執行完畢
exports.main = async(event,context)=>{
try{
return await db.collection("web1903emp").where({
name:"kaka'
}).remove();
}catch(e){
console.log(e);
}
}
2.6:小程序雲開發-雲存儲-5GB
(1)用戶.上傳文件流程
-用戶選擇圖片或拍照
-小程序上傳所選中圖片
-雲存儲返回圖片filelD //在雲存儲圖片地址
(2)開發流程.
-選擇圖片.
wx.chooselmage({
count:數值 //一次選擇幾張圖片默認9
sizeType:["original","compressed"] //選中圖片類型(原圖/壓縮)
sourceType:["album","camera"] //圖片來源(相冊/相機)
success:function(res){ //選中圖片成功回調
res.tempFilePaths //選中圖片地址
}
}）；
-上傳圖片
wx.cloud.uploadFile();
cloudPath:上傳成功後新文件名
filePath:選中圖片名
success：res=>{ 上傳成功
console.log(res.filelD);
上傳成功後返回指定文件路徑
}
示例1:文件上傳與顯示功能
-雲數據庫建立集合myphoto
目標:保存上傳文件fileID
-建立組件pages/myphoto/myphoto
-添加按鈕"上傳圖片"
#將上傳文件filelD保存myphoto中
-建立按鈕"顯示圖片"
-獲取集合中myphoto建立循環遍歷filelD
<image src="{{item.filelD}}"></image>
2.2:小程序-學子商城項目-下載安裝vant第三方庫
有贊團爲vant網站
https://youzan.github.io/vant-weapp
(1)建立項目描述文件package.json
右擊miniprogram目錄->選中在終端中打開菜單項
輸入命令npm init 回車 回車...
#npm init功能生成項目描述文件package.json
#執行成功後生成package.json 文件
(2)經過npm安裝vant第三方組件庫
右擊miniprograme 目錄->選中在終端中打開
輸入命令npm i vant-weapp -S --production 回車
#安裝成功看到文件夾node_ modules
#右擊miniprograme在硬盤打開
(3)點擊工具菜單-->構建npm
#將node_ _modues 內容複製一份miniprogram_ npm
#常見錯誤module .. not defined
解決:點擊工具菜單->構建npm
(4)點擊工具菜單->詳情
[*] 使用npm模塊
(5)在組件中配置要使用哪一個第三方組件
"usingComponents": {
"van-button": "vant-weapp/button/index"
}
#注意:組件路徑修改與miniprogram_ npm下目錄結構相同
(6)在當前組件中使用button按鈕
2.3:小程序-學子商城項目-娛樂
(1)電影列表從"豆瓣網"下載最新電影列表
豆瓣網熱映電影列表
http://api.douban.com/v2/movie/in_ theaters
第一個部分:接口地址
第二個部分:apikey=密鑰(別人開發者密鑰)
第三個部分:start第幾條記錄開始
count本次查詢幾條記錄
(2)如何獲取"豆瓣網"熱映電影列表發送ajax請求
2.1:小程序有二種請求數據方式
| 小程序端 |
雲函數 | |
| 發送方法 | wx.request({}) | 下載第三方ajax庫(request) |
| 協議支持 | 只支持https | 根據第三方庫決定 |
| 是否備案 | 通過ICP備案 | 能夠不備案 |
| 域名個數 | 20個 | 無限制 |
2.2:開發雲函數獲取"豆瓣"電影列表
-建立雲函數movielist3
-點擊movielist3鼠標右鍵~>打開終端
#注意下面命令有順序
npm install --save request
npm install --save request-promise
#這次請求使用ajax庫request-promise
#上面庫是request-promise依賴庫
2.3:開發雲函數
(1)引入request-promise 庫
var rp = require("request-promise");
(2)導出建立main函數
exports.main = async (event,context)=>{}
event:事件對象 保存請求參數
context:上下文對象 用戶openid appid..
(3)建立url請求地址
var url = 'http://api.. &start=${event.start}
&count=${event.count}' ;
(4)rp(urI) 返回查詢結果
2.4:學子商城--娛樂首頁
首頁功能:
(1)打開首頁組件時查看第-頁電影
(2)向上滑動屏幕查看下一頁
(3)點擊詳細按鈕跳轉電影詳細組件顯示內容
(4)電影圖片/電影名稱/電影導演/電影主角.... .
2.5:學子商城-娛樂首頁-設計首頁佈局
2.6:學子商城-娛樂首頁-添加樣式
2.7:學子商城-娛樂首頁-js實現以上功能
(1)功能一:打開首頁組件時查看第一頁電影
-onLoad
-loadMore(){}加載更多在此函數發送請
求獲取第一頁數據
--調用雲函數movielist3
--調用雲函數時傳參數start:10 count:10
--保存data list
2:今天的目標
2.1:學子商城--娛樂首頁完成
(1)打開首頁組件時查看第一頁電影 OK
(2)向.上滑動屏幕查看下一頁
向上滑動onReachBottom上拉觸底
常見錯誤:
(1) -404011 cloud function execution error
緣由:雲函數調用失敗
a雲函數上傳失敗
b依賴庫request下載
c切換雲環境
解決:
a,b檢查你本地雲函數拼寫正確,從新下載request
打開雲管理面板刪除原先雲函數再上傳
C app.js配置雲環境使用哪一個
-點擊詳細按鈕跳轉電影詳細組件顯示內容
目標:從home組件(關閉而且跳轉) comment評論組件
wx.redirectTo({
url:"/pages/comment/comment"
})
目標:從home組件(保留而且跳轉)comment評論組件
wx.navigateTo({
url:"/pages/comment/comment"
})
2.2:學子商城-娛樂詳情完成
功能列表:
(1)電影圖片
(2)評論功能
(2.1--評論內容[vant]
(2.2)--打分 [vant]
(2.3)--上傳圖片[上傳多張圖片]
2.3:學子商城--娛樂詳情完成-準備
(1)建立組件comment
(2)建立雲函數getDetail3獲取某部電影詳細信息
(3)下載安裝兩個依據ajax!!!
npm install --save request
#依賴庫
npm install --save request-promise
#請求庫
(4)檢查url豆瓣電影詳情url
http://api.douban.com/v2/movie/subject/電影id?apikey=0df993c66c0c636e29ecbb5344252a4a
(5)上傳部署雲函數
(6)雲測試
2.4:學子商城-娛樂詳情完成-開發(第三方組件庫vant)
(1)輸入框
(2)打分
(3)上傳按鈕
2.5:學子商城-娛樂詳情完成-輸入框
(1)查看手機
(2)打開配置文件comment.json
#刪除多餘目錄
{
"usingComponents": {
"van-field": "vant-weapp/field/index"
}
}
(3)在模板中使用組件comment.wxml
<van- field
value="{{ value }}"
placeholder="請輸入用戶名"
border="{{ false }}"
bind:change="onChange"
/>
(3)在模板中使用組件comment.js
Page({
data: {
value: "
onEhange(event) {
// event.detail爲當前輸入的值
console.log(event.detail);
}
});
2.6:學子商城--娛樂詳情完成.設計外觀
2.7:學子商城--娛樂詳情完成
功能1:當組件加載成功顯示電影詳細信息
1.1:data添加屬性movieid:0 保存電影id
1.2:data添加屬性detail:{}
保存電影信息
1.3:添加方法loadMore
組件建立成功調用
1.4:loadMore調用雲函數getDetail4 參數id:電影
將雲函數返回保存detail
1.5:在模板中顯示detail對象中數據
示例:loadMore
示例:上傳多張圖片
2.1:上傳圖片
異步9先完成
2.2:將上傳圖片fileld 保存雲數據庫異步1等待
2.今天的目標
2.1:學子商城評論(重點/難點)
常見錯誤
(1)JSON0位置錯誤
緣由:服務器返回數據不正確不是嚴格JSON字符串
解決:(1)網絡太差中間丟數據現象
(2)雲函數寫錯誤
"rating": {"max": 10, " average": 8.7 正確
appid: event 雲函數錯誤
2.2:學子商城評論-上傳圖片[選擇圖片](重點/難點)
功能:一.次請用戶選擇9張圖片
用戶將圖片保存data:{images:[]}
在按鈕下預覽選中9張圖片
wx.chooselmage({})
count:9
sizeType:[]
sourceType:[]
success:(res=>{})
2.3:學子商城評論-上傳圖片[上傳圖片](重點/難點)
-任務1:將data中選中圖片上傳雲存儲中
-任務2:將圖片fileID與用戶評論評分保存雲數據庫
問題:完成任務1與任務2遇到異步操做
[異步操做:任務1與任務2交替無序執行]
解決:ES6 Promise
(1)建立數組中元素Promise對象,每對象完成上傳圖片操做
Promise(reslove,reject)=>{
上傳圖片(新文件名,上傳，將上傳成功後fileID保存數組)
reslove();
}
(2)等待數組中全部Promise對象執行完畢
#等待list數組中全部Promise對象執行完畢後，執行回調函數
Promise.all(list).then(res=>{
一次性將filelD保存雲數據庫集中
})
(3)將_上傳全部圖片filelD 一次保存雲存儲中
2.4:學子商城-商城地址--地理定位(騰訊地圖)
htmI5新特性有- - 個對象geolocation 經過瀏覽器js程序
獲取當前用戶位置信息
位置信息(經度/緯度/海撥/速度)...用於實現LBS
(location Base Service)基於位置服務
餓了麼,滴滴打車...
手機瀏覽器定位
(1)智能手機GPS芯片與網絡定位精度在米範圍
(2)PC定位IP地址解析
htmI5中提供--個
geolocation
widow.navigator.geolocation({
getCurrentPostion:fn
});
2.5:學子商城-商城地址--小程序(騰訊地圖)
<map></map>
longitude 中心位置經度位置
latitude 中心位置緯度位置
scale縮放級別(3~20) 16
markes 標記點
polyline 路線(其它經度和緯度)
show-location顯示位置
style="width: 100%;height:600rpx"
#如何獲取指定位置經度緯度
#http://api.map.baidu.com/lbsapi/getpoint/
#116.300901,39.916085
#建立組件mymap個人地圖
#注意事項:在手機定位很是準確
2.6:學子商城-我的中心/個人電影(我喜歡電影)
功能1:添加本身喜歡電影[電影描述文字/電影圖片]
a:建立表單文字，上傳圖片
b:將圖片.上傳雲存儲而且圖片filelD保存雲數據庫
c:文件添加雲數據庫
功能2:將添加成功後電影分頁顯示[左側圖片/文字]
a:查詢雲數據庫喜歡電影信息分頁
2.7:學子商城-我的中心/個人電影(我喜歡電影)
功能
*(1)在雲數據庫中建立集合mymovie [在雲控制面板中]
*(2)建立組件pages/mymovie/mymovie
*(3)將home;mymap;mymovie 添加tabbar
(4)在組件mymovie(輸入框/.上傳圖片按鈕/添加按鈕)
4.1:mymovie.json引入二個組件輸入框/按鈕
4.2:添加輸入框在模板中
4.3:添加二個按鈕[上傳圖片提交]在模板中.
4.4:添加圖片顯示view
2:今天的目標
2.0:檢查
註冊訂閱號賬戶(新郵箱不能使用小程序註冊時郵箱)
檢查軟件安裝
phonegap desktop
夜神或藍碟 https://www.yeshen.com
2.1:完成我喜歡的電影
2.2:混編phonegap (瞭解)
#安裝混編軟件環境-定關閉防火牆
混編一種新技術:將web項目直接打包成功手機原生app安裝包
原生:android java
原生:蘋果 object C
h5 項目
微信小程序
支付寶小程序
2.3:混編phonegap (瞭解)
國外:phonegap混編平臺
國內: uniapp https://uniapp.dcloud.io/
提供二個方案
(1)一個程序打包成多種平臺app
(2)支持手機底層硬件開發(課程內容)
2.4:混編phonegap (瞭解)--建立開發環境
(1)4個程序支持 phonegap服務器/軟件模板
機模擬器/phonegap app
2.5:混編phonegap (瞭解)--手機硬件
-device 設備
device.platform 獲取手機操做系統I0S Android
device.uuid 獲取手機硬件編碼48
device.version 獲取手機版本
-notification提示功能（手機）
navigator.notification.alert(")提示信息
navigator.notification.confirm(msg,fn)確認消息
navigator.notification.beep(3)蜂鳴器
navgator.notification.vibrate( 1000) 震動1s
-camera 相機
navigator.camera.getPicture(fn1,fn2,{參數});
fn1拍照成功
fn2拍照失敗
{quality:50}拍照延遲時間
-capture 錄音
navigator.device.capture.captureAudio(fn1,fn2,參數);
fn1:錄音成功回調函數
fn2:錄音失敗回調函數
{limit:3}錄音幾回
-accelerometer 加速度傳感器
(1)獲取用戶當前位置信息
getCurrentAcceleration(fn1,fn2);
fn1:獲取位置成功返回對象xyZ
fn2:獲取位置失敗
(2)建立監聽用於監聽用戶位置變化
var變量= watchAcceleration(fn1,fn2,參數);
fn1 獲取位置成功返回對象xyZ
fn2 獲取位置失敗
{frequency:1000} 1s監聽一次
(3)取消監聽
clearWatch(變量)
-補充環境啓動過程
(1)啓動phonegap服務器
(2)啓動手機模擬器(藍碟/夜神)
(3)點擊模擬器phonegap app鏈接服務器
(4)template/www/index.html
2.6:微信公衆平臺--訂閱號-聊天機器人
任務一:複製微信訂閱號中測試賬appid(訂閱號鑰匙)
任務二:申請合法域名而且綁定4000端口.上weixin_ dy.zip
解決方案:內網穿透工具,此工具臨時生合法域名而且與4000程序綁定一塊兒
使用方法: ngroke.exe協議名端口
示例: .\ngrok http 4000 回車
任務三:開發聊天機器人app.js
(1)加載二個模塊express/wechat (聊天模塊)
(2)建立配置對象
config = {appid:"複製", //訂閱號鑰匙
token="weixin"} //暗號
server.post(' '/",wechat(config,(req,res)=>{
req.weixin.Content //手機用戶發送你信息
res.reply(回覆); //回覆.
}))
(3)node app.js
任務四:配置去微信公衆平臺測試賬戶裏
接口配置:
ur[https://d03b5142.ngrok.io]
token[weixin]
js接口安全域名
開發者工具-公衆平臺測試帳號
-
每一个你不满意的现在，都有一个你没有努力的曾经。