[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
- 点赞
- 小程序中的正则
- 组件中实现下拉刷新
- 用户授权
- 组件点击图片获取信息
- 说明
- 小程序上下滑动