微信小程序开发相对于微信公众号的开发显得更为重要,下面就来简单介绍一下微信小程序的开发.
1. 注册
在微信公众平台注册微信小程序, 账号一定要不同于微信公众号的邮箱哦.
2. 下载
点击右上角的 "文档" ,在左侧找到 "开发者工具的使用",点击蓝色字体 "微信开发者工具", 下载稳定版的Windows64 ,可根据自己的实际下载.安装以后就可以用啦.
3. 创建
打开下载的 "微信web开发者工具" ,创建一个微信小程序项目.
打开微信小程序右上角的 "小程序开发" ,这里有详细的API文档可供参考.
4. 底部导航栏 tabBar
点击右上角的 "文档"后点击上侧导航栏的指南--基础能力--自定义tabBar
在 "微信开发者工具" 里的app.json 文件中全局配置:
"tabBar": {
"color": "grey",
//选中时字体的颜色
"selectedColor": "#FF9900",
//底部导航栏的背景色
"backgroundColor": "#FFFACD",
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "pages/images/home.png",
"selectedIconPath": "pages/images/home1.png"
},
{
"pagePath": "pages/list/list",
"text": "列表",
"iconPath": "pages/images/list.png",
"selectedIconPath": "pages/images/list1.png"
},
{
"pagePath": "pages/mine/mine",
"text": "个人中心",
"iconPath": "pages/images/mine.png",
"selectedIconPath": "pages/images/mine1.png"
}]
}在pages目录下新建两个目录作为导航栏跳转的两个页面,我分别取名 list , mine,这两个目录需要仿照index目录新建四个文件.
此时 app.json 文件 需要配置底部导航栏跳转的路径;
"pages": [
"pages/index/index",
"pages/list/list",
"pages/mine/mine"
],5. 顶部导航栏
很简单,参照文档就好,直接代码示例(因为我要写电影列表,因此只在list.json文件配置,其他页面暂时不需要) , 如果都需要,可以直接在 app.json文件的window中配置:
如果是在app.json文件中配置,再次在其他页面文件中配置时,在此页面app.json文件中的配置会被覆盖.
{
"navigationBarBackgroundColor": "#439057",
"navigationBarTitleText": "豆瓣电影",
"navigationBarTextStyle": "white",
"enablePullDownRefresh": true,
"onReachBottomDistance":0
}6. 电影列表(list目录)
首先在list.js文件写生命周期,(大写P,回车就好啦), 然后就是静态页面啦,布局啦,此处省略一万字.....
list.js文件发起请求,并把它赋值给自定义的变量,代码示例:
Page({
/**
* 页面的初始数据
*/
data: {
//电影列表数据
movies:[]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
wx.request({
url: 'https://douban.uieee.com/v2/movie/top250',
data: '',
header: {
"content-type":"json"
},
method: 'GET',
dataType: 'json',
responseType: 'text',
success: res => {
console.log(res);
this.setData({
movies:res.data.subjects
})
},
fail: function(res) {},
complete: function(res) {},
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})请求返回结果示例:
list.wxml遍历就好啦,代码示例:
<view class='container'>
<!-- 电影列表项 -->
<view class='movie' wx:for="{{movies}}" wx:key="{{index}}">
<navigator>
<view class='movieItem'>
<!-- 排名 -->
<text class='rank'>No.{{index+1}}</text>
<!-- 电影信息 -->
<view class='item'>
<!-- 左边 -->
<view class='item-left'>
<image src="{{item.images.small}}"></image>
</view>
<!-- 右边 -->
<view class='item-right'>
<text class='title'>{{item.title}}</text>
<view>
<i-rate value="{{item.rating.average/2.5}}" size="15">
<text class='rate'>{{item.rating.average/2.5}}星</text>
</i-rate>
</view>
<view class='time'>{{item.durations[0]}}</view>
<view class='year'>{{item.pubdates[0]}}</view>
<view class='act'>{{item.genres}}/{{item.directors[0].name}}/<text wx:for="{{item.casts}}" wx:key="{{index}}"> {{item.name}}</text></view>
</view>
</view>
</view>
</navigator>
</view>
</view>list.wxss文件 代码示例:
.movie{
padding: 10rpx 20rpx;
}
.movieItem{
border-bottom: 1rpx solid #ccc;
padding: 20rpx 0;
}
.item{
display: flex;
margin-top: 10rpx;
}
.item-left{
width: 25%;
background-color: #F08080
}
.item-left image{
width: 100%;
height: 100%;
border-radius: 10rpx;
}
.item-right{
width: 70%;
padding-left: 5%;
}
.rank{
background-color: orange;
border-radius: 10rpx;
font-size: 36rpx;
padding: 4rpx;
}
.item-right .title{
font-size: 32rpx;
font-weight: 600;
}
.item-right .time{
color: #F08080;
font-size: 30rpx;
}
.item-right .year{
font-size: 30rpx;
margin: 10rpx 0;
}
.item-right .act{
background-color: #ccc;
font-size: 30rpx;
border-radius: 7rpx;
}小声逼逼: 上侧--真机调试,扫一扫可以在手机上预览哦.
电影列表效果图:
请自觉忽略它的样式......
用到更多: 电影列表的星星评分
iView Weapp -- 一套高质量的微信小程序 UI 组件库
1. 注册后进入首页,点击GitHub,下载dist文件夹,将dist文件夹直接放在项目的目录下,它是这样的:
然后进行全局配置, app.json:
{
"usingComponents": {
"i-rate": "../../dist/rate/index"
},
......
}基本配置完成!
腾讯云开发者
