微信小程序练习笔记
微信小程序的练习笔记，用来整理思路的，文档持续更新中。。。
案例一：实现行的删除和增加操作
test.js
// 当我们在特定方法中创建对象或者定义变量给与初始值的时候，它是局部的，是无法被其他方法所使用的
// 初始数据赋值
var initData = "this is first line\n this is second line"
var listData = [];
Page({
// 初始数据复制
data: {
text: initData
},
// 自定义添加方法
add: function(e) {
// 对于listData进行数据处理使用的push方法
listData.push("other line")
// 通过setData方法进行赋值操作 this表示当前对象
this.setData({
text: initData + "\n" + listData.join("\n")
})
},
remove: function(e) {
// 处于业务逻辑考虑，我们需要进行一个判断，防止误删
if (listData != null) {
// 对于listData进行数据处理使用的pop方法进行删除
listData.pop("other line")
// 通过setData方法进行赋值操作，this表示当前对象
this.setData({
text: initData + "\n" + listData.join("\n")
})
} else {
this.setData({
text: "没有新增的行了，所以删除全部行"
})
}
}
})
test.wxml
<!-- view相当于我们html的div属于块元素 -->
<!-- html中大多数的选择器都是可以使用的，但是我们微信小程序的默认编码习惯是只设置类选择器 -->
<!-- 归根结底就是做我们的页面样式控制 -->
<view class="btn_area">
<view class="btn_body">
<!-- text标签相当于我们html中的span属于行内元素 -->
<!-- 我们可以使用{{js的变量名}}显示我们的js中赋值的初始数据 -->
<text>{{text}}</text>
<!-- 创建按钮进行事件触发 -->
<!-- bindtap绑定我们的的js方法 -->
<button bindtap="add">添加行</button>
<button bindtap="remove">删除行</button>
</view>
</view>
案例二：实现页面的跳转与返回操作
index.wxml
<!-- 第二步创建跳转页面一（也就是我们的首页） -->
<view class="btn-area">
<!-- url指定我们的跳转页面，对应的使用？占位符的方式带了一个参数title -->
<!-- 使用hover-class属性增加了我们的点击样式改变了点击颜色 -->
<navigator class="nv1" url="/nv/nv?title=nv" hover-class="nv-hover">
跳转到nv页面
</navigator>
<navigator class="re1" url="/re/re?title=re" hover-class="re-hover" open-type="redirect">
跳转到re页面
</navigator>
</view>
index.wxss
/* 添加我们的点击样式 */
.btn-area{
margin-left: 250rpx
} .nv-hover {
color: blue;
} .re-hover {
color: red;
} .nv1 {
color: red;
width: 250rpx;
text-align: center;
border: 1px solid red;
margin-top: 500rpx;
} .re1 {
color: blue;
width: 250rpx;
text-align: center;
border: 1px solid blue;
}
nv.js
// nv/nv.js
Page({ /**
* 生命周期函数--监听页面加载
*/
onLoad: function (op) {
console.log(op)
// 使用我们的setData方法把我们传过来的参数初始加载到我们的页面
this.setData({
text:op.title
})
}, })
nv.wxml
<!-- 页面展示，提示怎么返回上一级页面（也就是我们的跳转过来前的页面） -->
<view class="v1">
<text>这是我们从上一个页面传过来的参数【{{text}}】</text>
<text>点击左上角可以返回上级界面此处可以不用设置跳转</text>
</view>
nv.wxss
.v1{
color: red;
text-align: center;
border: 1px solid red;
margin-top: 500rpx
}
re.js
// re/re.js
Page({
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.setData({
text:options.title
})
}
})
re.wxml
<!--re/re.wxml-->
<view class="v1">
<text>这是我们从跳转页面传过来的参数【{{text}}】</text>
<view>
<text>改变跳转方式，我们从此页面无法点击左上角进行返回</text>
<navigator url="/index/index" open-type="redirect">返回上级页面</navigator>
</view>
</view>
re.wxss
.v1{
color:blue;
text-align: center;
border: 1px solid blue;
margin-top: 400rpx
}
全部代码
配置
{
"pages": [
"board/board",
"serach/serach",
"profile/profile",
"index/index",
"nv/nv",
"re/re",
"list/list"
],
"tabBar":{
"color":"red",
"selecteColor":"green",
"borderStyle":"black",
"backgroundColor":"#ccc",
"list":[
{
"pagePath":"board/board",
"iconPath":"image/board.png",
"selectedIconPath":"image/board-actived.png",
"text":"榜单"
},
{
"pagePath": "serach/serach",
"iconPath": "image/search.png",
"selectedIconPath": "image/search-actived.png",
"text": "接口"
},
{
"pagePath": "profile/profile",
"iconPath": "image/profile.png",
"selectedIconPath": "image/profile-actived.png",
"text": "入口"
}
]
},
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Hello World",
"navigationBarTextStyle": "black"
},
"sitemapLocation": "sitemap.json"
}
app.json
轮播图
// board/board.js
Page({ /**
* 页面的初始数据
*/
data: {
imgUrls: [
'/image/背景.jpg',
'/image/国旗.jpg',
'/image/二次元4.1.jpg' ],
indicatorDots: true,
interval: 2000,
duration: 2000,
indicatorColor: 'rgba(96,96,96,.3)',
indicatorActiveColor: '#FF8C00', boards:[
{ key: 'in_theaters', name: '正在热映' },
{ key: 'coming_soon', name: '即将上映' },
{ key: 'top250', name: 'T0P250' },
{ key: 'us_box', name: '北美票房榜' }, ] }, /**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) { }, /**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () { }, /**
* 生命周期函数--监听页面显示
*/
onShow: function () { }, /**
* 生命周期函数--监听页面隐藏
*/
onHide: function () { }, /**
* 生命周期函数--监听页面卸载
*/
onUnload: function () { }, /**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () { }, /**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () { }, /**
* 用户点击右上角分享
*/
onShareAppMessage: function () { }
})
board.js
<!--board/board.wxml-->
<view class="head">
<swiper indicator-dots="{{ indicatorDots}}" autoplay="ture" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}" wx:for-item='it'>
<swiper-item>
<image src="{{it}}" class="slide-image" width="355" height="150" />
</swiper-item>
</block>
</swiper> <view class="header">
<text class="title">豆瓣电影榜单</text>
<text class="de">豆瓣出品 仅供娱乐</text>
</view>
<view class="body">
<scroll-view scroll-y="true" height="100%">
<block wx:for="{{boards}}">
<navigator url="../list/list?type={{item.key}}&title={{item.name}}">
<view class="board">
<view class="board-info">
<text class="board-name">{{item.name}}</text>
<image class="board-img" src="/image/arrowright.png"></image>
</view>
</view>
</navigator>
</block>
</scroll-view>
</view>
</view>
board.wxml
/* board/board.wxss */
.head{
line-height:;
}
.body{
padding-left: 30rpx;
padding-right: 30rpx;
flex:;
overflow: auto;
}
.header{
padding: 40rpx 80rpx 20rpx;
}
.title{
display: block;
font-size: 50rpx;
}
.de{
display: block;
margin-top: 30rpx;
color: #888;
font-size: 28rpx;
}
.board{
margin-top: 20rpx;
margin-bottom: 20rpx;
background-color: #FBF9FE;
overflow: hidden;
border-radius: 4rpx;
cursor: pointer;
}
.board-info{
display: flex;
padding: 40rpx;
align-items: center;
flex-direction: row;
}
.board-name{
flex:1；
}
.board-img{
width:32rpx;
height:32rpx;
}
board.wxss
跳转页面
// index/index.js
Page({ /**
* 页面的初始数据
*/
data: {
imgUrls:[
'/image/ccq.png',
'https://i.cnblogs.com/EditGalleries.aspx?catid=1538321',
'https://www.cnblogs.com/cainiao-chuanqi/gallery/image/258134.html',
'https://www.cnblogs.com/cainiao-chuanqi/gallery/image/258137.html',
'https://i.cnblogs.com/EditGalleries.aspx?catid=1532380' ],
indicatorDots:true,
interval:2000,
duration:2000,
indicatorColor:'rgba(96,96,96,.3)',
indicatorActiveColor:'#FF8C00'
}, /**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) { }, /**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () { }, /**
* 生命周期函数--监听页面显示
*/
onShow: function () { }, /**
* 生命周期函数--监听页面隐藏
*/
onHide: function () { }, /**
* 生命周期函数--监听页面卸载
*/
onUnload: function () { }, /**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () { }, /**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () { }, /**
* 用户点击右上角分享
*/
onShareAppMessage: function () { }
})
index.js
<!-- 第二步创建跳转页面一（也就是我们的首页） -->
<view class="btn-area"> <swiper indicator-dots="{{ indicatorDots}}" autoplay="ture" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}" wx:for-item='it'>
<swiper-item>
<image src="{{it}}" class="slide-image" width="355" height="150" />
</swiper-item>
</block>
</swiper> <!-- url指定我们的跳转页面，对应的使用？占位符的方式带了一个参数title -->
<!-- 使用hover-class属性增加了我们的点击样式改变了点击颜色 -->
<view class="nv1">
<navigator url="/nv/nv?title=nv" hover-class="nv-hover">
跳转到nv页面
</navigator>
</view>
<view class="re1">
<navigator url="/re/re?title=re" hover-class="re-hover" open-type="redirect">
跳转到re页面
</navigator>
</view>
</view>
index.wxml
/* 添加我们的点击样式 */
.btn-area{
margin-left: 250rpx
}
.nv-hover {
color: blue;
}
.re-hover {
color: red;
}
.nv1 {
color: red;
width: 250rpx;
text-align: center;
border: 1px solid red;
margin-top: 500rpx;
}
.re1 {
color: blue;
width: 250rpx;
text-align: center;
border: 1px solid blue;
}
index.wxss
List电影列表
// list/list.js
Page({
data:{
list:[],
loading:false,
title:"正在加载中。。。"
},
onLoad:function(options){
const apiUrl = "https://douban.uieee.com/v2/movie/" + options.type
const _this = this
wx.request({
url: apiUrl,
header:{
'Content-Type':'json'
},
success:function(res){
_this.setData({
list:res.data.subjects,
title:res.data.title,
loading:false
})
}
})
}
})
list.js
<loading hidden="{{!loading}}">
加载中，请稍等。。。
</loading>
<view class="header">
<text>{{title}}</text>
</view>
<view class="list">
<navigator wx:for="{{list}}" url="../item/item?id={{item.id}}">
<view class="list-item">
<div id="rights">
<image src="{{item.images.small}}"></image>
</div>
<view class="info">
<div id="zhong1">
<text>{{item.original_title}} ( {{item.year}} )</text>
</div>
<div id="zhong2">
<span>导演：
<block wx:for = "{{item.directors}}">
{{item.name}}
</block>
</span>
</div>
</view>
<view class="rating">
<text>{{item.rating.average}}</text>
</view>
</view>
</navigator>
</view>
<!-- <loading hidden="{{!loading}}">
加载中，请稍等。。。
</loading>
<view class="header">
<text></text>
</view>
<view class="list">
<navigator url="../item/item?id={{item.id}}">
<view class="list-item">
<image src="/image/二次元4.1.jpg"></image>
<view class="info">
<text>{{item.original_title}} (红红火火恍恍惚惚)</text>
<span>导演：
<block >
啦啦啦
</block>
</span>
</view>
<view class="rating">
<text>9</text>
</view>
</view>
</navigator>
</view> -->
list.wxml
.header{
text-align: center;
font-size: 60rpx;
background-color: rgb(170, 16, 11);
border-radius: 80rpx;
margin-bottom:30rpx;
color: white;
}
.list-item image{
float: left;
width:400rpx;
height:550rpx;
margin-left: 37rpx;
margin-bottom: -200rpx;
box-shadow: 0rpx 0rpx 20rpx #696969;
}
.list text{
padding: 500rpx
}
#zhong1{
background-color:#DCDCDC;
float: right;
margin-left: -450rpx;
position: relative;
top:230rpx;
font-size: 45rpx;
border-radius: 50rpx;
}
#zhong2{
width:400rpx;
height:550rpx;
/* background-color: bisque; */
/* float: left; */
position: relative;
top:250rpx;
}
.rating text{
position:relative;
top:-500rpx;
left: -50rpx;
color: red;
font-size: 200rpx;
/* box-shadow: 0rpx 0rpx 10rpx #696969; */
}
list.wxss
电影详情
// list/list.js
Page({
data: {
list: [],
loading: false,
title: "正在加载中。。。"
},
onLoad: function (options) {
const apiUrl = "https://douban.uieee.com/v2/movie/" + options.id
const _this = this
wx.request({
url: apiUrl,
header: {
'Content-Type': 'json'
},
success: function (res) {
_this.setData({
list: res.data,
title: res.data.title,
loading: false
})
}
})
}
})
item.js
<loading hidden="{{!loading}}">
加载中，请稍等。。。
</loading>
<scroll-view scroll-y="true" wx:if="{{list.title}}">
<view class="meta">
<image class="poster" src="{{list.image}}" background-size="cover"/>
<text class="title">{{list.title}} ( {{list.attrs.year[0]}} )</text>
<text class="info">评分：{{list.rating.average}}</text>
<text class="info3">导演：{{list.author[0].name}}{{list.author[1].name}}</text>
<text class="info2">主演：
<block wx:for="{{list.attrs.cast}}">
{{item}}
</block>
</text>
<view class="summary">
<text class="label">摘要：</text>
<text class="content">{{list.summary}}</text>
</view>
</view>
</scroll-view>
item.wxml
.poster{
width:400rpx;
height:550rpx;
box-shadow: 0rpx 0rpx 20rpx #696969;
border-radius: 20rpx;
display: block;
margin-left: 25%;
}
.title{
text-align: center;
display: block;
font-size: 50rpx;
}
.info{
color: red;
display: block;
text-align: center;
}
.info3{
display: block;
text-align: center;
}
.info2 {
padding: 5rpx 10rpx;
display: inline-block;
font-size: 35rpx;
margin-left:120rpx;
/* float: middle; */
border: 10rpx;
border-color: #a8a8a8;
border-width: 5rpx;
border-style: groove;
text-align: center;
}
.label{
color: red;
font: 70rpx;
}
.content{
/* border-color: rgb(8, 8, 8);
border-width: 1rpx;
border-style: ridge; */
}
item.wcss
搜索接口
// 设置初始数组为空
var initData = [];
Page({
data: {
search: "请输入搜索字",
// 显示在页面的数组数据
listData: []
},
search: function (e) {
// console.log(e.detail.value)
// 创建我们的url
const apiUrl = "https://api.jisuapi.com/zidian/word?word=" + e.detail.value,
_this = this
wx.request({
url: apiUrl,
data: {
appkey: "05498a73e2b2ac4c",
},
// 考虑数据调用报错，传输数据类型
header: {
'Content-Type': 'json'
},
// 调用成功
success: function (res) {
// console.log(res.data.result)
// 增加判断以处理俄二次查询后在此追加数据的bug
if (initData.length == 0) {
initData.push(res.data.result);
// 调用我们的setData进行赋值
_this.setData({
listData: initData
})
} else {
// 当我们已经查询过数据后，下面已经有查询结果，所以需要先清除原有数据，在增加现有数据
initData.pop();
initData.push(res.data.result);
// 调用我们的setData进行赋值
_this.setData({
listData: initData
})
}
}
})
}
})
serach.js
<!-- 因为是搜索页，所以需要搜索框 -->
<view class="page-headert">
<input placeholder="{{search}}" bindchange="search"></input>
</view>
<view class="view-text">
<block wx:for="{{listData}}">
<text>字：{{item.name}}</text>
<text>拼音：{{item.pinyin}}</text>
<text>笔画：{{item.bihua}}</text>
<text>部首：{{item.bushou}}</text>
<text>结构：{{item.jiegou}}</text>
<text>笔顺：{{item.bishun}}</text>
<text>五笔：{{item.wubi}}</text>
<text>英文：{{item.english}}</text>
<!-- 在此进行了循环来获取我们的解释 -->
<block wx:for="{{item.explain}}">
<text>内容：{{item.content}}</text>
</block>
</block>
</view>
serach.wxml
.page-headert{
/* 文本居中 */
text-align: center;
/* 添加边框 */
border: 3rpx solid beige
}
/* 对于查到数据进行样式控制 */
.view-text text{
color: darkgray;
margin: 0 20rpx 0;
display: block;
line-height: 50rpx
}
serach.wxss