微信小程序小Demo
调用API，轮播图，排行榜，底部BabTar的使用。。。
board
// board/board.js
Page({ /**
* 页面的初始数据
*/
// 可以是网络路径图片，也可以引入本地图片地址
data: {
imgUrls: [
'/image/111.jpg',
'/image/333.jpg',
'/image/222.jpg'
// '/image/444.jpg' ],
// 设置相关swiper组件的属性值
indicatorDots: true,
interval: 2000,
duration: 2000,
indicatorColor: 'rgba(96,96,96,.3)',
indicatorActiveColor: '#FF8C00', boards: [
{ key: 'in_theaters', name: '汉语词典 ' },
], boards2: [
{ key: 'coming_soon', name: '成语大全 ' },
], boards3: [
{ key: 'coming_soon', name: '新华字典 ' },
] }, /**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) { }, /**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () { }, /**
* 生命周期函数--监听页面显示
*/
onShow: function () { }, /**
* 生命周期函数--监听页面隐藏
*/
onHide: function () { }, /**
* 生命周期函数--监听页面卸载
*/
onUnload: function () { }, /**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () { }, /**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () { }, /**
* 用户点击右上角分享
*/
onShareAppMessage: function () { }
})
board.js
<!--board/board.wxml-->
<!-- indicatorDots：是否显示面板指示点 -->
<!-- autoplay：是否自动播放 -->
<!--interval：图片循环时间设置 -->
<!-- duration：动画滑动时间 -->
<!-- 这里的属性值既可以在js中初始化数据赋值，也可以直接写在页面属性值中 -->
<view class="head">
<swiper indicator-dots="{{ indicatorDots}}" autoplay="ture" interval="{{interval}}" duration="{{duration}}">
<!-- wx:for 根我们Java中的for是一样的，进行循环遍历的，这里带入的是我们从js传过来的图片数组 -->
<block wx:for="{{imgUrls}}" wx:for-item='it'>
<!-- 注意事项：wx：for渲染我们js中的图片数组，item默认写法，获取我们的图片数组中的图片，可通过增加wx:for-item="it"来改变默认的item名 -->
<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> <block wx:for="{{boards2}}">
<navigator url="../list2/list2?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> <block wx:for="{{boards3}}">
<navigator url="../list3/list3?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>
<!-- // 第一步：先在我们的pages中增加我们需要进行切换的页面
// 第二步：在我们的app.json全局配置文件中增加tabBar栏
// 注意：我们的图片引用路径以及名称需要正确匹配
//先要在我们的pages中创建对应的tab栏页面 -->
</scroll-view>
</view>
</view>
board.wxml
/* board/board.wxss */
.head{
line-height:;
}
.head swiper{
margin-top: 20rpx;
}
.body{
padding-left: 30rpx;
padding-right: 30rpx;
flex:;
overflow: auto;
background-color: #DEB887;
border-radius: 25rpx;
}
.header{
margin-top: 20rpx;
padding: 40rpx 80rpx 20rpx;
background-color: #DCDCDC;
border-radius: 50rpx;
margin-bottom: 27rpx;
}
.title{
display: block;
font-size: 50rpx;
text-align: center;
}
.de{
display: block;
margin-top: 30rpx;
color: #888;
font-size: 28rpx;
text-align: center;
}
.board{
margin-top: 30rpx;
margin-bottom: 30rpx;
background-color: #F0FFF0 ;
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
效果图
list
// 设置初始数组为空
var initData = [];
Page({
data: {
search: "请输入一个词:",
// 显示在页面的数组数据
listData: []
},
search: function (e) {
// console.log(e.detail.value)
// 创建我们的url
const apiUrl = "https://api.jisuapi.com/cidian/word?appkey=yourappkey&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
})
}
}
})
} })
list.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.content}}</text>
<!-- <text>例子：{{item.example}}</text> -->
<text>出自：{{item.comefrom}}</text>
<text>近义词：{{item.thesaurus}}</text>
<text>反义词：{{item.fan}}</text>
<!-- 在此进行了循环来获取我们的解释 --> <block wx:for="{{item.explain}}">
<text>例子：{{item.example}}</text>
</block> </block>
</view>
list.wxml
.page-headert{
/* 文本居中 */
text-align: center;
/* 添加边框 */
border: 3rpx solid beige;
}
/* 对于查到数据进行样式控制 */
.view-text text{
color: darkgray;
margin: 0 20rpx 0;
display: block;
line-height: 50rpx
}
/*标题的自定义格式*/
.page-headert {
border: 1px solid #696969;
border-left-width: 5px;
border-radius: 10px;
border-right-width: 5px;
background-color: #FBF9F9;
background-position: left center;
padding: 3px 5px;
width: 100%;
display: inline-block;
box-sizing: border-box;
}
/*编辑 收藏*/
.view-text text{
background-color: #51C332;
border-radius: 3px;
text-align: center;
color: white;
text-shadow: 1px 1px 2px #8B0000;
padding: 3.7px 13px;
font-size: 14px;
font-weight: bold;
line-height: 1.5;
margin: 10px 3px;
box-shadow: black 0px 2px 8px;
}
list.wxss
list2
// 设置初始数组为空
var initData = [];
Page({
data: {
search: "请输入一个成语：",
// 显示在页面的数组数据
listData: []
},
search: function (e) {
// console.log(e.detail.value)
// 创建我们的url
const apiUrl = "https://api.jisuapi.com/chengyu/detail?appkey=yourappkey&chengyu=" + 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
})
}
}
})
}
})
list2.js
.page-headert{
/* 文本居中 */
text-align: center;
/* 添加边框 */
border: 3rpx solid beige
}
/* 对于查到数据进行样式控制 */
.view-text text{
color: darkgray;
margin: 0 20rpx 0;
display: block;
line-height: 50rpx
}
.page-headert {
border: 1px solid #696969;
border-left-width: 5px;
border-radius: 10px;
border-right-width: 5px;
background-color: #FBF9F9;
background-position: left center;
padding: 3px 5px;
width: 100%;
display: inline-block;
box-sizing: border-box;
}
.view-text text{
background-color: #51C332;
border-radius: 3px;
text-align: center;
color: white;
text-shadow: 1px 1px 2px #8B0000;
padding: 3.7px 13px;
font-size: 14px;
font-weight: bold;
line-height: 1.5;
margin: 10px 3px;
box-shadow: black 0px 2px 8px;
}
list2.wxss
<!-- 因为是搜索页，所以需要搜索框 -->
<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.pronounce}}</text>
<text>解释：{{item.content}}</text>
<text>出自：{{item.comefrom}}</text>
<text>反义词：{{item.antonym}}</text>
<text>近义词：{{item.thesaurus}}</text>
<!-- 在此进行了循环来获取我们的解释 --> <block wx:for="{{item.explain}}">
<text>例子：{{item.example}}</text>
</block> </block>
</view>
list2.wxml
list3
// 设置初始数组为空
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
})
}
}
})
}
})
list3.js
.page-headert{
/* 文本居中 */
text-align: center;
/* 添加边框 */
border: 3rpx solid beige
}
/* 对于查到数据进行样式控制 */
.view-text text{
color: darkgray;
margin: 0 20rpx 0;
display: block;
line-height: 50rpx
}
.page-headert {
border: 1px solid #696969;
border-left-width: 5px;
border-radius: 10px;
border-right-width: 5px;
background-color: #FBF9F9;
background-position: left center;
padding: 3px 5px;
width: 100%;
display: inline-block;
box-sizing: border-box;
}
.view-text text{
background-color: #51C332;
border-radius: 3px;
text-align: center;
color: white;
text-shadow: 1px 1px 2px #8B0000;
padding: 3.7px 13px;
font-size: 14px;
font-weight: bold;
line-height: 1.5;
margin: 10px 3px;
box-shadow: black 0px 2px 8px;
}
list3.wxss
<!-- 因为是搜索页，所以需要搜索框 -->
<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>
list3.wxml
serach
// 设置初始数组为空
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
.page-headert{
/* 文本居中 */
text-align: center;
/* 添加边框 */
border: 3rpx solid beige
}
/* 对于查到数据进行样式控制 */
.view-text text{
color: darkgray;
margin: 0 20rpx 0;
display: block;
line-height: 50rpx
}
<!-- 因为是搜索页，所以需要搜索框 -->
<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
utils
{
"pages": [
"board/board",
"profile/profile",
"serach/serach",
"list/list",
"list2/list2",
"list3/list3",
"index/index"
],
"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": "中华文字",
"navigationBarTextStyle": "black"
},
"sitemapLocation": "sitemap.json"
}
app.json