[TOC]
### 1. 點擊大圖顯示
~~~
previewImage: function (e) {
var current = e.target.dataset.src;
wx.previewImage({
current: current, // 當前顯示圖片的http鏈接
urls: // 需要預覽的圖片http鏈接列表
})
},
~~~
### 2. 點擊選擇圖片
~~~
chooseImage: function () {
var that = this
wx.chooseImage({
count: 9, // 默認9
sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有
success: function (res) {
// 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標簽的src屬性顯示圖片
var tempFilePaths = res.tempFilePaths
that.setData({
imagesList: tempFilePaths
})
}
})
},
~~~
### 3. 緩存
~~~
1. 清空緩存
wx.clearStorageSync('清除該名字的緩存');
2. 設置緩存
wx.setStorageSync('名字', 值)
3. 獲取緩存
獲取緩存名為image的值
wx.getStorageSync('image');
~~~
### 4. 緩存綜合運用點擊將圖片裝緩存
~~~
// pages/test/test.js
Page({
/**
* 頁面的初始數據
*/
data: {
isEmpty: true
},
onLoad() {
var image = wx.getStorageSync('image');
if (image) {
var imgUrl = image.imgUrl[0];
var isEmpty = image.isEmpty;
this.setData({
imgUrl,
isEmpty
})
}
},
click() {
wx.chooseImage({
count: 9, // 默認為9
sizeType: ['original', 'compressed'], // 指定原圖或者壓縮圖
sourceType: ['album', 'camera'], // 指定圖片來源
success: res => {
var tempFilePaths = res.tempFilePaths;
wx.setStorageSync('image', {
imgUrl: tempFilePaths,
isEmpty: false
});
var image = wx.getStorageSync('image');
var imgUrl = image.imgUrl[0];
var isEmpty = image.isEmpty;
this.setData({
isEmpty: isEmpty,
imgUrl
})
}
})
}
})
<view>
<image src="{{isEmpty?'/images/iqiyi.png':imgUrl}}"
catchtap="click" mode="aspectFill"></image>
<text>懦者從未啟程,弱者死于途中,而我們在路上</text>
</view>
~~~
### 4. 下拉刷新
~~~
onReachBottom(){
在頂部顯示正在加載的動畫
wx.showNavigationBarLoading();
影藏正在加載的動畫
wx.hideNavigationBarLoading();
在中間顯示正在加載的動畫
wx.showLoading({
title: '正在加載...',
});
影藏正在加載的動畫
wx.hideLoading();
},
~~~
### 5. 水平滾動
~~~
<scroll-view class='scroll' scroll-x="true">
<image src=''></image>
</scroll-view>
.scroll{width: 100%;padding:20rpx;white-space:nowrap;}
image{
width: 200rpx;
height: 270rpx;
margin: 10rpx;
}
~~~
### 6. web-view
~~~
<web-view src=""></web-view>
相當于html中的a標簽的跳轉屬性
~~~
### 7. 分享功能
~~~
wx.showActionSheet({
itemList: ["分享到QQ","分享到微博"],
})
onShare(){
wx.showActionSheet({
itemList: ["分享到微信","分享到微博","分享到朋友圈"],
itemColor: '#ff2d51',
success:res=>{
console.log(res.tapIndex);
this.setData({
shared:true
})
},
fail:err=>{
this.setData({
shared:false
})
}
})
}
~~~
### 8. 設置標題
~~~
wx.setNavigationBarTitle({
title
});
~~~
### 9. 監聽背景音樂
~~~
const audio = wx.getBackgroundAudioManager(); 在頁頂
/* 音樂暫停監聽 */
audio.onPause(()=>{
self.setData({
isPlay:false
})
})
/* 音樂播放監聽 */
audio.onPlay(()=>{
})
~~~
### 10. 獲取搜索框中輸入的值
~~~
<view class="section">
<image src="/images/icon/search.png"></image>
<input placeholder="楚喬傳、悲傷逆流成河" confirm-type="search" bindconfirm="onConfirm"/>
</view>
onConfirm(e){
// console.log(e.detail.value)
var count=e.detail.value;
var url=`https://douban.uieee.com/v2/movie/search?q=${count}`;
http(url,this.handleData);
},
handleData(res){
// console.log(res)
var title =res.data.title;
var subjects=res.data.subjects;
var movies=[];
subjects.forEach(ele => {
var average=ele.rating.average;
var stars=star(ele.rating.stars);
var title=ele.title;
var imgUrl=ele.images.small;
var id=ele.id;
var temp={
average,
stars,
title,
imgUrl,
id
};
movies.push(temp);
});
this.setData({movies});
},
~~~
### 11. 將文件封裝在外部文件然后在其他頁面使用
~~~
function http(url, callback, type) {
wx.request({
url,
header: {
'Content-Type': 'json'
},
success: function (res) {
callback(res,type);
}
});
}
function star(stars) {
var value = stars.slice(0, 1);
var arr = [];
for (let i = 0; i < 5; i++) {
if (i < value) {
arr.push(1);
} else {
arr.push(0);
}
}
return arr;
}
function sliceTitle(title){
if(title.length>6){
title = title.slice(0,6)+"...";
}
return title;
}
function handleCasts(casts){
var arr = [];
casts.forEach(ele=>{
arr.push(ele.name);
})
var newArr = arr.join("/");
return newArr;
}
function handleGenres(genres){
var genres = genres.join("、");
return genres;
}
export default {
http,
star,
sliceTitle,
handleCasts,
handleGenres
}
使用
import utils from"../../../utils/utils";
var http=utils.http;
var star=utils.star;
~~~
### 12.跳轉頁面傳參
~~~
<text catchtap="moreMove" data-type="{{type}}" data-title="{{title}}">更多 ></text>
type 和 title 為data中取到的數據
moreMove(res){
console.log(res)
var type=res.currentTarget.dataset.type;
var title=res.currentTarget.dataset.title;
wx.navigateTo({
url: '/pages/move/moremove/moremove?type='+type+"&title="+title,
})
},
~~~
### 13. 點擊事件成功將自身id傳給下個頁面
~~~
handClick(event){
var id=event.currentTarget.dataset.id
//console.log(event.currentTarget.dataset.id)
wx.navigateTo({
url:"/pages/details/details?id="+id
});
},
一個點擊事件成功在它的函數中就有一個id屬性 然后就可以傳給下一個頁面
~~~
### 14. 搜索框中的 小叉叉
~~~
說明：
<input class="post" bind:confirm="onTap" name="search" placeholder="短評最多12個字"></input>
//小程序圖標
<icon type="search" size="18" color="#999999">
</icon>
~~~
~~~
// plain="{{true}}"使button變為透明
<form bindsubmit="onForm" class="section">
<form bindsubmit="onForm" class="section">
<input placeholder="楚喬傳、悲傷逆流成河" confirm-type="search" bindconfirm="onConfirm" focus="true" name="search" bind:focus="onFocus" bind:blur="onBlur" value="{{value}}">
<button class="btn" formType="submit" hover-class="none" bindconfirm="onConfirm" plain="{{true}}">
<icon type="search" size="20" color=""></icon>
</button
></input>
<icon type="clear" wx:if="{{isShow}}" catchtap="onClick" size="14" class="clears"></icon>
<button class="btn2" formType="submit" hover-class="none" bindconfirm="onConfirm">搜 索</button>
</form>
~~~
~~~
Page({
/**
* 頁面的初始數據
*/
data: {
isShow:false,
value:null
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
},
//回車獲取輸入內容
onConfirm(e){
console.log(e.detail.value)
},
moveDetails(res) {
console.log(res)
var id = res.currentTarget.dataset.id;
var title = res.currentTarget.dataset.title;
// console.log(title)
wx.navigateTo({
// url: '/pages/move/movedetails/movedetails?id='+id+"&title="+title,
})
},
//點擊搜索獲取輸入內容
onForm(e){
console.log(e.detail.value);
var value=e.detail.value.search;
},
onFocus(){
this.setData({
isShow:true
})
},
onBlur(){
this.setData({
isShow:false
})
},
onClick(){
this.setData({
value:""
})
}
})
~~~
~~~
.section .btn{
display: flex;
justify-content: center;
align-items: center;
border: none;
width: 40rpx;
height: 60rpx;
position: absolute;
top:10rpx;
left: 50rpx;
z-index: 70
}
.section input{
width: 450rpx;
border-radius: 50rpx;
background: rgb(243, 241, 241);
padding: 20rpx 100rpx ;
padding-right: 0;
margin-left: 30rpx;
}
.btn2{
width:120rpx;
height:75rpx;
position: absolute;
top: 0rpx;
right: 30rpx;
font-size: 16px;
background: #DD2F2E;
color:#fff;
}
.clears{
position: absolute;
z-index:99;
top: 13rpx;
right:215rpx;
}
~~~
### 15. 自動獲取焦距
~~~
<input placeholder="這是一個可以自動聚焦的input" focus="true"/>
占位符顏色改變
<input placeholder-style="color:red" placeholder="占位符字體是紅色的" />
~~~
### 16.form 表單
~~~
1. form的confirm值和input的值相同
2. input要有名字
3. button是submit
<form bindsubmit="confirm">
<input type="text" confirm-type="search" name="search" bindconfirm="confirm" />
<button formType="submit">確定</button>
</form>
//js
confirm(e){
var value=e.detail.value.search;
if(typeof value=="function"){
value=e.detail.value;
}
console.log(value)
},
~~~
### 17.每次進入頁面都會觸發該函數
~~~
onShow(){
},
~~~
- 前期準備
- 軟件安裝配置
- 語法 以及 功能 的實現
- 小程序中的 輪播
- 翻轉輪播
- 實現 跳轉 頁面
- 詳談 跳轉頁面
- for 循環 渲染 頁面（重點）
- 點擊 改變 元素內容
- 功能 封裝(創建、使用 模板）（重點）
- js模塊化（重點）
- if-else實現 三目運算
- 底部導航欄tabBar 實現
- 小程序中的 函數調用 方法
- 小程序中的 block 包裹元素
- 小程序中的 hover事件
- import 標簽(重點）
- 其他
- 在本地模擬接口取數據
- 點擊跳轉 并將該元素的id一起傳遞給跳轉的頁面
- 點擊詳情頁顯示
- 點擊事件（bindtap/catchtap）
- 圖片的mode屬性
- 跳轉頁面時實現頂部顯示頁面標題
- hello world
- 將豆瓣服務器接口設置在本地
- 組件
- 地圖
- 下拉刷新
- 數據加載 loading...
- 動態設置導航（title設置）
- 實現js代碼的模塊化
- 傳參
- 組件中的生命周期函數
- 實戰
- 發送http請求
- 可用的豆瓣接口
- 處理豆瓣列表頁的數據
- 從接口上取數據渲染到頁面上1
- 從接口上取數據渲染頁面實現瀑布流2
- 瀑布流
- 音樂播放
- 文章詳情頁
- 音樂播放組件
- 音樂播放 最終版
- 電影（封裝取數據渲染）
- 分享與收藏
- 搜索框
- 將電影列表數據放緩存
- 零碎知識點
- 談組件
- 請求封裝 （重點）
- 實現簡單需求的請求失敗的封裝
- 使用class實現顯示各種錯誤信息
- 再次封裝帶class的請求實現改變里面給的url
- 使用promise 封裝http
- promise
- generator
- 01.介紹
- 02. 基本
- 03. 實例
- 04.yield
- asyns
- 01. 介紹
- 02. 使用
- 03. 取豆瓣
- 子組件（模板文件）接收父組件傳來的參數并改變其值
- 模塊化
- 在模板中提取相同的部分behavior
- 字符串與數組之間的轉換
- 子組件向父組件傳參
- 談 triggerEvent
- 整體展示
- 父組件向子組件傳wxml （在兩個組件比較相似的情況 定義卡 槽傳 wxml）
- 傳css （在父組件中定義子組件的樣式）
- 使用wxs給wxml傳js
- 點贊
- 小程序中的正則
- 組件中實現下拉刷新
- 用戶授權
- 組件點擊圖片獲取信息
- 說明
- 小程序上下滑動