關於微信小程序的一些總結
mpvue？html
{{}} 在vue和小程序中的區別？vue
01 小程序中{{}}和vue中的{{}}用法基本一致，能夠顯示data中的數據，能夠寫表達式node
不同的地方？jquery
01 小程序的{{}}能夠寫在屬性中git
02 小程序的{{}}不能使用方法的調用github
微信小程序中的 wx:keyweb
01 wx:for 能夠遍歷數組中的數據ajax
02 wx:for 必定要指定wx：key，否則會報一個警告
sql
03 wx:key 的值有兩種方式
mongodb
若是遍歷的值是一個對象，wx:key能夠是對象中某一個惟一的屬性 。
若是數組中的值是一個字符串，wx：能夠指定爲*this， *this表示字符串自己。
在微信小程序中註冊事件分爲兩種
bind+事件： bind註冊的事件會冒泡
catch+事件： catch註冊的事件不會冒泡
在方法中如何放到data中的數據？
大坑：在微信小程序中的數據，數據不是雙向綁定
data中的數據發生了改變，視圖中的數據並無跟着改變
直接修改 this.data 而不調用 this.setData 是沒法改變頁面的狀態的，還會形成數據不一致。
方法一
data: { msg:"hellow 小程序" }, change(){ this.setData({ msg:'哈哈哈' //要修改的參數和值
}) }
經過 this.setData({ }) 方式進行修改，能夠實現雙向綁定
方法二
data: { msg:"hellow 小程序" }, change(){ // 修改msg的值
this.data.msg="你好啊"
// 須要進行一次同步
this.setData(this.data) }
在小程序中將數據保存data有一個專用方法
this.setData({
屬性名：新值
})
如何獲取input文本框的值？
01經過e.detail.value
02若是註冊事件的時候，想要傳遞參數，給當前元素添加自定義屬，經過e.currentTaget.dataset來獲取值。
js中的data中發生了改變，頁面中的數據並不會改變，調用setData同步才行
input框中的值發生了改變，js中的數據並不會跟着變，本身註冊事件，本身修改data中的數據。微信小程序中不支持雙向綁定
微信支付
https://blog.brain1981.com/1946.html
小程序的生命週期，app.js頁面（建立一個小程序的實例，只會調用一次）
//app.js 初始化小程序 ， 作一些通用的操做 App({ // 小程序初始化的時候執行的鉤子函數，全局只會觸發一次 // 小程序中一次性的操做，均可以放到onLaunch中 // 好比： 登陸 獲取你的用戶信息 onLaunch(){ //作登陸 獲取用戶信息等 console.log('onLaunch','小程序初始化好了') }, // 只要小程序顯示出來了，就會執行 onShow(){ console.log('onShow','小程序顯示了') }, // 小程序隱藏的時候觸發 onHide(){ console.log('onHide','小程序隱藏的時候') }, // 小程序腳本發生錯誤就會觸發 onError(){ // 能夠把錯誤的信息收集起來，放到數據庫 console.log('onError','報錯了') }, // 小程序喲啊打開的頁面不存在的時候觸發 onPageNotFound(){ } })
Page頁面（建立頁面）
// pages/index/index.js // page方法用來建立一個小程序的頁面 Page({ // 頁面加載的時候會執行onLoad,一次 onLoad () { console.log('onLoad','頁面加載了') }, // 頁面顯示 onShow () {//通常在這裏發送ajax console.log('onShow','頁面顯示的時候就會執行') }, // 頁面隱藏 onHide () { console.log('onHide', '頁面隱藏的時候就會執行') }, // 表示頁面已經渲染完了 onReady (){//能夠發送ajax console.log('onReady', '頁面渲染完了') wx.setNavigationBarTitle({ title: 'yyyy' }) }, // 頁面卸載時候觸發 onUnload () { } })
小程序發送ajax請求
// pages/sy/sy.js Page({ data: { imgList: [],//用於存儲輪播圖數據 }, onShow: function () { wx.request({ url: 'https://locally.uieee.com/slides', method:'GET', dataType:'json', success:(res)=>{ this.data.imgList=res.data //同步 this.setData(this.data) } }) } })
微信開發工具下載地址
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
建立項目
1 微信公衆平臺 ： https://mp.weixin.qq.com/
2 小程序祕鑰 AppID ： 左側導航欄----開發---開發設置
雲開發
詳情----調試基礎庫 2.2.5
注意事項：每個小程序項目不能超過2M
微信小程序中常見的標籤 wxml
wxss
（1）單位：rpx -----響應式像素。能夠根據屏幕的寬度自適應調用圖片文字容器大小
（2）引入外部的樣式文件 @import './base.wxss'
關於RPX，移動端開發你使用的是什麼像素？
示例： iphone6（2）
邏輯像素 * dpr = 物理像素
iphone6 375px * 2 = 750rpx
小程序，引入其它樣式文件
將項目公共樣式內容統一保存在一個文件中
style/common.wxss
@import '../../style/common/wxss'
小程序開發文檔
https://developers.weixin.qq.com/miniprogram/dev/framework/
微信公衆平臺--小程序(重點)-第三方組件庫(樣式庫)
雲開發兼容性
小程序第三方組件庫（樣式庫）
Vant Weapp
https://youzan.github.io/vant-weapp/#/intro
-WeUI
-iView Weapp
小程序 配置文件
project.config.json 項目配置文件
app.json 項目全局配置文件
exam01.json 組件配置文件
app.json 全局配置文件
若是一個選項添加 app.json 中 全部的組局都會生效
微信小程序中 js 與 網頁 程序中 js有什麼區別？
ECMA 基本類型： string ；number； boolean；undefined ； null；
ECMA 對象類型：Date ; Math ; RegExp ; Array ; Function ;...
DOM/BOM 不能使用，小程序中寫 document.getElemnt會報錯
微信小程序循環 wx:for
<view wx:for="{{數組名稱}}" wx:key="index"> {{item}} 當前對象 {{index}} 當前元素下標 </view>
wx:for="{{循環數組名稱}}" wx:key="index" 數組元素下標(排序規則），快速排序
wx:if
<view wx:if="{{condition}}"></view> condition:表達式 true false true 當前元素正常顯示 false 當前元素刪除
if elif else
<view wx:if="{{condition}}">111</view> // if
<view wx:elif="{{condition}}">222</view> // else if
<view wx:else>333</view> // else
hidden
<view hidden="{{condition}}">內容</view>
condition:表達式 true false
true隱藏 false 顯示
問題:何時使用if 何時使用hidden
(1)若是此元素須要頻繁切換使用hidden
(2)若是此元素在運行中不大可能改變則 wx:if 較好
微信公衆平臺--小程序--js/事件-事件
pc端項目 屏幕寬度 > 970px 操做:鼠標鍵盤
移動端項目 屏幕寬度 < 970px 操做:手指
移動端項目：
touchstart 當手指觸碰到屏幕時發生的事件，無論幾根手指
touchmove 當手指在屏幕上滑動的時候觸發
touchend 當手指離開屏幕時候觸發
zepto.js 至關於移動端的jquery
tap 觸碰一次
longtap 長按一次 超過350ms
swipe 滑動
swipeLeft 滑動
微信小程序事件分爲兩種
小程序事件分爲兩種
(1)冒泡事件:當一個組件上事件被觸發後，該事件向父元素傳遞
(2)非冒泡事件:當一個組件上事件被觸發後，不向父元素傳遞
小程序綁定事件方式
-支持事件冒泡
<view bind事件名="事件處理函數"></view>
-不支持事件冒泡
<view catch事件名="事件處理函數"></view>
例子
支持冒泡
<view bindtap='handle2'>父元素 <view bindtap='handle1'>子元素</view> </view>
不支持冒泡
<view catchtap='handle2'>父元素 <view catchtap='handle1'>子元素</view> </view>
小程序--生命週期(組件)
組件生命週期:一個組件從建立開始到使用最後銷燬過程
/* 組件建立成功後觸發一次 (1)發送ajax請求 (2)獲取傳遞參數 */ onLoad (options) { },
/* 組件渲染成功後觸發一次 */ onReady () { },
/* 顯示組件 */ onShow () { },
/* 隱藏組件 */ onHide () { }, /* 銷燬組件 */ onUnload () { },
上拉加載 下拉刷新
/** * --監聽用戶下拉動做 （用戶下拉操做，刷新操做） 下拉刷新 * 小程序默認禁止 用戶下拉操做 * 修改默認行爲，激活下拉。 * 01 全局修改 app.json 文件 window 下 修改 * "enablePullDownRefresh": true 容許下拉 * 02 當前組件修改 在當前組件的json文件中 修改 * "enablePullDownRefresh": true 容許下拉 */ onPullDownRefresh () { console.log('下拉刷新') }, /** * 頁面上拉觸底事件的處理函數 （上拉觸底，翻頁加載） 上拉加載 */ onReachBottom () { console.log('上拉加載') }
微信小程序組件跳轉 wx.redirectTo({}) -----不能返回，由於跳轉後把原先的組件銷燬了
利用 wx.redirectTo({}) 實現跳轉
好比 組件1 跳轉到 組件 2。 會先卸載組件1 而後建立組件2
保留而且跳轉
wx.navigateTo({
url:"/pages/comment/comment"
})
小程序--雲開發
小程序與騰訊雲合做新方案[雲開發]雲開發==[雲數據庫+雲存儲+雲函數]
雲數據庫:數據增長/刪除/修改/查詢....
雲存儲:上傳文件/下載文件/分享文件/管理文件....
雲函數:獲取appid/調用高級權限操做 （沒有跨域）
小程序--開通雲開發
小程序開發工具-->"雲開發" 開通
環境名稱:[web-test-01]英文 數字 -
環境id:[] 自動生成環境複製下來
小程序--雲數據庫(mongodb nosql數據庫)
雲開發提供一個JSON數據庫提供2GB免費空間
| 關係型數據庫 |
文檔數據庫 |
| 數據庫 database |
數據庫 database |
| 表 table |
集合 collection |
| 行 row |
記錄 record/doc |
| 列 column |
字段 field |
#關係型數據庫:適合複雜數據關係 企業內部軟件系統
#文檔型數據庫:數據關係簡單 頻繁查詢,更新 app
| 數據類型 |
|
| String 字符串 |
Number數字 |
| Object 對象 |
Array數組 |
| Bool 布爾 |
GeoPoint 地理位置點 |
| Date 時間(客戶端) |
NULL |
小程序--雲數據庫操做
(1)控制檯: 建立集合
(2)雲函數:
(3)小程序操做:
經過小程序操做雲數據庫
（1）經過控制檯 建立集合 好比 web2008
（2）初始化默認數據庫
const db = wx.cloud.database();
（3）向集合中添加新記錄
db.collection('集合名稱').add(
{
data:{name:'zxh',age:'18'},
success:function( res ){ },
fail:function(err){ }
}
)
add() 向集合中添加數據
data:{} 數據
success 添加成功回調函數
fail 添加失敗回調函數
常見錯誤:
(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錯誤"
小程序操做雲數據庫--更新
db.collection("集合名稱").doc("當前記錄id").update({
data:{
屬性名：值
}
}).then( res=>{
console.log(res)
} ).catch(err=>{
console.log(err)
})
小程序操做雲數據庫--刪除
db.collection("集合名稱").doc("記錄id") .remove().then(res=>{}).catch(err=>{})
#注意事項:經過小程序一次只能刪除一條數據
小程序雲開發-雲數據庫--查詢
(1)查詢全部數據
db.collection("集合名稱").get().then(res=>{}).catch(err=>{})
get:獲取查詢
then:查詢成功後獲取返回內容
res 查詢結果
catch:查詢失敗
err 失敗緣由
(2)查詢指定數據
db.collection("集合名稱").where({name:"jerry"}).get().then(res=>{}).catch(err=>{})
where查詢條件
get 獲取查詢
then 查詢成功後獲取返回內容
res 查詢結果
小程序雲開發-雲函數
雲函數:特殊函數將其保存小程序雲上(騰訊雲)
雲函數從功能不少優勢:權限高 完成複雜操做
#注意事項:開發雲函數要求本地下載安裝nodejs v8.0 以上
小程序雲開發-雲函數-求和函數 sum
(1)開發工具 coludfunctions
鼠標右鍵->新建node.js雲函數
(2)雲函數名稱 sumc
(3)打開index.js
(4)添加雲函數代碼
exports.main = async (event,context)=>{
return {
sumc:event.i + event.j
}
}
exports 導出 event 事件對象(獲取用戶參數)
main 主函數 context 上下文對象(獲取用戶信息)
async 導步(ES7語法)
(5)上傳部署
右擊建立並部署,雲端安裝依賴
(6)測試雲函數
(7)在小程序中調用開發雲函數
wx.cloud.callFunction({ //調用雲函數
name:"雲函數名", //雲函數名
data:{i:1,j:2} //參數
}).then(res=>{ //調用成功
console.log(res);
}).catch(err=>{ //調用失敗
console.log(err);
})
#注意事項:若是你舊版本小程序工具沒有server-sdk報錯
#右擊 countFunctions 在終端中打開
#npm install --save wx-server-sdk@latest
常見錯誤
(1) Error: errCode: -404011 cloud function execution error
緣由:
-調用雲函數不存在
-調用去函數沒有上傳
-雲函數名子拼寫錯誤
小程序雲開發-雲函數-login 登陸
小程序雲開發-雲函數-批量刪除
雲數據庫web2019 同名記錄 name:"zxy"
雲函數目的:刪除name:"zxy"
async:異步ES7 異步執行函數
await:等待若是執行耗時任務啓動關鍵字等待任務
執行完畢
exports.main = async (event,context)=>{
try{ // await 等刪完以後再返回結果
return await db.collection("web2019").where({
name:"zxy"
}).remove();
}catch(e){
console.log(e);
}
}
小程序雲開發-雲存儲-5GB
(1)用戶上傳文件流程
-用戶選擇相冊或拍照
-小程序上傳所選中圖片
-雲存儲返回圖片 fileID //在雲存儲圖片地址
(2)開發流程
-選擇圖片
-上傳圖片
wx.cloud.uploadFile();
cloudPath: 上傳成功後新文件名
filePath: 選中圖片名
success:res=>{ 上傳成功
console.log(res.fileID);
上傳成功後返回指定文件路徑
}
例子：以下
Page({ data: {}, downP(){//自定義構造函數downP(){ } wx.chooseImage({ count: 1 , //一次選擇幾張圖片默認 9 sizeType: ["original", "compressed"], //選中圖片類型 (原圖/壓縮) sourceType: ["album", "camera"], //圖片來源 (相冊/相機) success: function (res) { //選中圖片成功回調 var list = res.tempFilePaths //選中圖片地址,返回數組 var file = list[0] //選中的圖片地址 wx.cloud.uploadFile({ //上傳圖片至雲存儲 cloudPath: +new Date()+".jpg", //時間戳起一個名字 filePath: file, //選中的要上傳的圖片地址 success: res => { console.log(res) console.log(res.fileID); //上傳成功後返回指定文件路徑 } }); } }); }, onLoad: function (options) {}, onReady: function () { }, onShow: function () {}, onHide: function () {}, onUnload: function () {}, onPullDownRefresh: function () {}, onReachBottom: function () {}, onShareAppMessage: function () {} })
綜合例子
文件上傳與顯示功能：利用雲函數將圖片上傳到雲存儲，再將雲存儲中的圖片地址存儲到雲數據庫的集合中
*雲數據庫建立集合 myphoto 目標:保存上傳文件fileID
*建立組件 pages/myphoto/myphoto
*添加按鈕 "上傳圖片"
*將上傳文件fileID保存myphoto中
*建立按鈕 "顯示圖片"
*獲取集合中myphoto 建立循環遍歷 fileID
<image src="{{item.fileID}} "></image>
const db = wx.cloud.database(); //初始化默認數據庫 Page({ data: { // 經過this.setData({}) 添加數據 list:[] //雲存儲圖片fileID }, showPic(){//此函數負責獲取myphoto集合全部記錄，而且顯示在模板中 db.collection("myphoto").get()//獲取集合中全部的記錄 .then(res => { var result = res.data console.log(result) this.setData({ //向data中添加數據 list:result }) }) .catch(err => { console.log(err)}) }, myupload(){ wx.chooseImage({//此函數負責選中圖片而且上傳至雲儲存，上傳成功後將圖片fileID保存myphoto集合中 count: 1, //一次選擇幾張圖片默認 9 sizeType: ["original", "compressed"], //選中圖片類型 (原圖/壓縮) sourceType: ["album", "camera"], //圖片來源 (相冊/相機) success(res){ //選中圖片成功回調 var list = res.tempFilePaths //選中圖片地址,返回數組 var file = list[0] //選中的圖片地址 wx.cloud.uploadFile({ //上傳圖片至雲存儲 cloudPath: +new Date() + ".jpg", //時間戳起一個名字 filePath: file, //選中的要上傳的圖片地址 success(res){ var fID = res.fileID //上傳成功後返回指定文件路徑 db.collection('myphoto').add(//向集合中添加數據 { data: { fileID : fID }, success(res){console.log(res)}, fail(err){ console.log(err) } } ) }, fail(err){ //上傳失敗 返回err console.log(err) } }); }, fail(err){ console.log(err) } }); }, onLoad: function (options) { }, onReady: function () { }, onShow: function () { }, onHide: function () { }, onUnload: function () { }, onPullDownRefresh: function () { }, /** * 頁面上拉觸底事件的處理函數 */ onReachBottom: function () { }, /** * 用戶點擊右上角分享 */ onShareAppMessage: function () { } })
環境id報錯，若是有兩個環境id，一直報錯，配置以下
小程序--商城項目-下載安裝vant 第三方庫
有贊團爲vant網站
https://youzan.github.io/vant-weapp
(1)建立項目描述文件 package.json 默認沒有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)在組件中配置要使用哪一個第三方組件，好比使用button
"usingComponents": {
"van-button": "vant-weapp/button/index"
}
#注意:組件路徑修改與miniprogram_npm下目錄結構相同
(6)在當前組件中使用button按鈕
<van-button type="default">默認按鈕</van-button>
小程序--商城項目-娛樂
(1)電影列表從"豆瓣網"下載最新電影列表
豆瓣網熱映電影列表
http://api.douban.com/v2/movie/in_theaters?apikey=0df993c66c0c636e29ecbb5344252a4a&start=0&count=10
第一個部分:接口地址
第二個部分:apikey=密鑰(別人開發者密鑰)
第三個部分:start 第幾條記錄開始
count 本次查詢幾條記錄
(2)如何獲取"豆瓣網"熱映電影列表-發送ajax請求
小程序有二種請求數據方式
| 小程序端 |
雲函數 |
|
| 發送方法 |
wx.request({}) |
下載第三方ajax 庫 (request) |
| 協議支持 |
只支持https |
根據第三方庫決定 |
| 是否備案 |
通過ICP備案 |
能夠不備案 |
| 域名個數 |
最多20個 |
無限制 |
|
|
|
開發雲函數獲取"豆瓣"電影列表
-建立雲函數 movielist3
-點擊movielist3 鼠標右鍵->終端打開
#注意下面命令有順序
npm install --save request
npm install --save request-promise
#這次請求使用ajax庫 request-promise
#上面庫是request-promise 依賴庫
開發雲函數
(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(url) 返回查詢結果
代碼以下
// 雲函數入口文件 const cloud = require('wx-server-sdk') cloud.init() // 雲函數movellist3，此函數功能：向豆瓣網發送請求，獲取最新熱映電影列表 // 01 引入第三方ajax庫 request-promise // 02 建立main函數 // 03 建立變量 url 請求地址 // 04 請求rp函數發送請求而且將豆瓣返回電影列表返回調用者 var rp = require("request-promise"); exports.main = async (event, context) => { return event var url = `http://api.douban.com/v2/movie/in_theaters?apikey=0df993c66c0c636e29ecbb5344252a4a&start=${event.start}&count=${event.count}` return rp(url) //發送請求 .then( res=>{ //請求成功 return res } ) .catch( err=>{ console.log(err) } ) }
上拉加載
拼接
// pages/home/home.js Page({ data: { list:[] }, loadMore(){ wx.cloud.callFunction({ //調用雲函數 name: "movielist3", //雲函數名 data: { start:this.data.list.lenght, count:10 } //參數 }).then(res => { //調用成功 var obj = JSON.parse(res.result)//將字符串轉爲js對象 var rows = obj.subjects;//保存電影列表的數據 rows = this.data.list.concat(rows)//將電影列表數組拼接操做 this.setData({ list: rows //保存電影列表subjects電影列表 }) console.log(obj.subjects) }).catch(err => { //調用失敗 console.log(err); }) }, onLoad: function (options) { this.loadMore() }, onReachBottom: function () {//頁面上拉觸底事件的處理函數 this.loadMore()//發送請求下載下一頁的數據 }, onReady: function () {}, onShow: function () {}, onHide: function () {}, onPullDownRefresh: function () {}, onShareAppMessage: function () { } })
商城--娛樂詳情完成-準備
(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/26794435?apikey=0df993c66c0c636e29ecbb5344252a4a
(5)上傳部署雲函數
(6)雲測試
小程序發送ajax
const cloud = require('wx-server-sdk')
cloud.init()
/* s
功能：發送ajax請求獲取豆瓣電影詳情內容
01引入第三方庫request-Promise
02建立main函數
03向豆瓣發送請求
04返回豆瓣電影詳情內容
*/
var rp = require("request-promise");
exports.main = async (event, context) => {//event--接收參數， context--上下文對象
var url = `http://api.douban.com/v2/movie/subject/${event.id}?apikey=0df993c66c0c636e29ecbb5344252a4a`
return rp(url) //發送請求
.then(res => {return res} )//函數執行成功
.catch( err => {console.log(err)} )
}
// 雲函數入口文件 const cloud = require('wx-server-sdk') cloud.init() // 雲函數movellist3，此函數功能：向豆瓣網發送請求，獲取最新熱映電影列表 // 01 引入第三方ajax庫 request-promise // 02 建立main函數 // 03 建立變量 url 請求地址 // 04 請求rp函數發送請求而且將豆瓣返回電影列表返回調用者 var rp = require("request-promise"); exports.main = async (event, context) => { var url = `http://api.douban.com/v2/movie/in_theaters?apikey=0df993c66c0c636e29ecbb5344252a4a&start=${event.start}&count=${event.count}` return rp(url) //發送請求 .then( res=>{ //請求成功 return res } ) .catch( err=>{ console.log(err) } ) }
商城--娛樂詳情完成-開發(第三方組件庫 vant)
https://youzan.github.io/vant-weapp/ 文檔手冊
(1)輸入框
(2)打分
(3)上傳按鈕
商城--娛樂詳情完成-輸入框
(1)查看手機
(2)打開配置文件comment.json
#刪除多餘目錄 path/to/dist
{
"usingComponents": {
"van-field": "vant-weapp/field/index",
"van-button": "vant-weapp/button/index",
"van-rate": "vant-weapp/rate/index"
}
}
(3)在模板中使用組件 comment.wxml
<van-field
value="{{ value }}" //用戶輸入內容
placeholder="請輸入用戶名" //佔位符
bind:change="onChange" //輸入事件
/>
(4)在模板中使用組件 comment.js
Page({
data: {
value: ''
},
onChange(event) {
console.log(event.detail);
}
});
背景虛化 效果
/* pages/comment/comment.wxss */ /* 1 電影背景圖片虛化效果 */ .detai-container{ /* position: relative; */ height: 400rpx; filter: blur(40rpx); /* 模糊濾鏡 */ opacity: 0.9 /*透明度 */ } /* 2 電影背景遮罩層，顯示電影背景底圖 */ .detail-mask{ position: absolute; width: 100%; height: 400rpx; background: #333; /* 深色的背景 */ top:0; left: 0; z-index: -1; /*顯示在底層*/ } .detail-info{ position: absolute; display: flex; /*彈性佈局*/ top:0; left: 0; width: 100%; height: 400rpx; /*高度與遮罩層一致*/ padding: 20rpx } .detail-img{ width: 280rpx; /* 大圖寬度 */ height: 90%; /* 大圖高度 */ margin-right: 24rpx; /* 與右側文字間距 */ }
微信加載中
- 1. 關於微信小程序的一些總結
- 2. 關於微信小程序
- 3. 微信小程序總結
- 4. 微信小程序 總結
- 5. 關於微信小程序開發我的總結
- 6. 關於微信小程序本身的一些見解
- 7. 關於微信小程序的一些見解
- 8. 關於微信小程序的一些猜想
- 9. 微信小程序中一些有用的組件總結
- 10. 微信小程序項目總結（一）
- 更多相關文章...
- • C# 程序結構 - C#教程
- • 第一個MyBatis程序 - MyBatis教程
- • 算法總結-歸併排序
- • ☆基於Java Instrument的Agent實現
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 關於微信小程序的一些總結
- 2. 關於微信小程序
- 3. 微信小程序總結
- 4. 微信小程序 總結
- 5. 關於微信小程序開發我的總結
- 6. 關於微信小程序本身的一些見解
- 7. 關於微信小程序的一些見解
- 8. 關於微信小程序的一些猜想
- 9. 微信小程序中一些有用的組件總結
- 10. 微信小程序項目總結（一）