微信小程序優(yōu)點(diǎn)和缺點(diǎn):
優(yōu)點(diǎn):
即用即走退疫、無需安裝、省流量勾哩、省安裝時(shí)間抗蠢、不占用桌面
依托微信流量举哟,天生推廣傳播優(yōu)勢(shì)
開發(fā)成本比app低
缺點(diǎn):
用戶留存,即用即走是優(yōu)勢(shì)迅矛,也存在一些問題
入口相對(duì)傳統(tǒng)app要深很多
限制較多妨猩,頁(yè)面大小不能超過2MB,不能打開超過10個(gè)層級(jí)的頁(yè)面
小程序關(guān)聯(lián)微信公眾號(hào)如何確定用戶的唯一性:
如果開發(fā)者擁有多個(gè)移動(dòng)應(yīng)用秽褒、網(wǎng)站應(yīng)用壶硅、和公眾帳號(hào)(包括小程序),可通過 unionid 來區(qū)分用戶的唯一性销斟,因?yàn)橹灰峭粋€(gè)微信開放平臺(tái)帳號(hào)下的移動(dòng)應(yīng)用庐椒、網(wǎng)站應(yīng)用和公眾帳號(hào)(包括小程序),用戶的 unionid 是唯一的票堵。換句話說扼睬,同一用戶,對(duì)同一個(gè)微信開放平臺(tái)下的不同應(yīng)用悴势,unionid 是相同的
<meta charset="utf-8">
準(zhǔn)備工作
1:用沒有注冊(cè)過微信公眾平臺(tái)的郵箱注冊(cè)一個(gè)微信公眾號(hào)窗宇, 申請(qǐng)帳號(hào) ,點(diǎn)擊 https://mp.weixin.qq.com/wxopen/waregister?action=step1 根據(jù)指引填寫信息和提交相應(yīng)的資料,就可以擁有自己的小程序帳號(hào)特纤。注冊(cè)完成之后開始登錄军俊。
我們可以在菜單 “設(shè)置”-“開發(fā)設(shè)置” 看到小程序的 AppID 了 。小程序的 AppID 相當(dāng)于小程序平臺(tái)的一個(gè)身份證捧存,后續(xù)你會(huì)在很多地方要用到 AppID (注意這里要區(qū)別于服務(wù)號(hào)或訂閱號(hào)的 AppID)粪躬。有了小程序帳號(hào)之后,我們需要一個(gè)工具來開發(fā)小程序昔穴。
根據(jù)官方教程進(jìn)行開發(fā)https://mp.weixin.qq.com/debug/wxadoc/dev/
小程序初始化目錄:
1:page 頁(yè)面文件夾 存放項(xiàng)目頁(yè)面渲染相關(guān)文件镰官,新建文件夾,再新建pages吗货;
上手開發(fā)
標(biāo)簽組件
<view></view>
<text></text>
模板語法
①條件渲染
<view wx:if="{{表達(dá)式}}">xxx</view>
<view wx:elif="{{表達(dá)式}}">xxx</view>
<view wx:else>xxx</view>
②列表渲染
<view wx:for="{{list}}" wx:key="{{index}}">{{index}}--{{item}}</view>
<text wx:for="{{list}}" wx:for-item="myitem" wx:for-index="myindex"> {{myindex}}~{{myitem}} </text>
③模板template
定義
<template name="temp"> <view>標(biāo)題:{{name}}</view> </template>
調(diào)用
<template is="temp" {{name:"han"}}>
導(dǎo)入模板
<import src = "xxx.wxml" />
④非template-任意的wxml文件
導(dǎo)入
<include src="xxx.wxml" />
相當(dāng)于把xxx.wxm文件內(nèi)容(除了template)拷貝到include地方
⑤事件
類型
bindtap 單擊
bindinput 表單發(fā)生改變
事件參數(shù)
<view bindtap="showMsg" data-msg="xxx"></view> showMsg(e){ e.target.dataset.msg //獲取事件參數(shù) },
⑥表單
<input value="{{msg}}" bindinput="inputHd"></input>
inputHd(e){
e.detail.value //表單的值
},
更新數(shù)據(jù)與視圖
this.setData({數(shù)據(jù)名1:數(shù)據(jù)值1})
組件與API
①組件
容器view
內(nèi)容text
表單input/button
②api
1.showToast
wx.showToast({
title:'成功',
icon:'success',
duration:2000
})
2.showLoading
wx.showLoading({
title:'加載中',
})
setTimeout(function(){
wx.hideLoading()
},2000)
3.setStorageSync存儲(chǔ)數(shù)據(jù)
wx.setStorageSync('key','value')
4.getStorageSync獲取數(shù)據(jù)
var value = wx.getStorageSync('key')
5.wx.request請(qǐng)求數(shù)據(jù)
導(dǎo)航
①標(biāo)簽<navigator>
01 默認(rèn)導(dǎo)航 url=""
02 open-type打開頁(yè)面類型
navigate 默認(rèn)打開
redirect不留歷史記錄
switchTab 切換底部欄
navigateBack 返回
03 打開小程序
a. app.json中配置
"navigateToMiniProgramAppIdList": ["wxb8f91a4e8d7eb4ae"],
b. navigator填寫
<navigator target="miniProgram" open-type="navigate" app-id="wxb8f91a4e8d7eb4ae" path="要打開的頁(yè)面泳唠,默認(rèn)首頁(yè)" extra-data="" version="release"> 面試寶典 </navigator>
②js方式
wx.navigateTo({url:''})跳轉(zhuǎn)頁(yè)面
wx.redirectTo({url:''})跳轉(zhuǎn)不留歷史記錄
wx.switchTab({url:''})底部導(dǎo)航欄頁(yè)面切換
wx.navigateBack()返回
wx.navigateToMiniProgram({appid:'appid'})切換小程序
生命周期
onLoad 頁(yè)面的參數(shù)(ajax請(qǐng)求通知在這個(gè)函數(shù)調(diào)用)
onShow 頁(yè)面顯示
onReady頁(yè)面首次渲染
onHide
switchTab,切換底部導(dǎo)航蘭navigate跳轉(zhuǎn)頁(yè)面
onUnload卸載(redirect時(shí)候,頁(yè)面就會(huì)卸載)
onPullDownRefresh 下拉刷新
onReachBottom觸底
onShareAppMessage 分享