微信小程序实战

微信小程序在2017年1月9日正式上线，随着逐步的开放和更新，小程序的关注度和热度不断升高，可想未来的发展不容小觑，当然作为移动开发者，我一直保持着高度的关注，刚好最近闲来无事，赶紧接触下小程序。

小程序的开发需要在微信公众平台官网注册一个小程序（mp.weixin.qq.com），选择小程序，开始申请，可参考申请文档：https://mp.weixin.qq.com/debug/wxadoc/introduction/index.html?t=201729

小程序注册完成之后，就能获取到AppID，然后下载开发者工具，使用小程序的管理员或已绑定的开发者进行登录，就可以创建项目了，需要填写AppID、项目名称及本地开发目录。

关于小程序的简易教程我想大家应该有所了解，在这里我就不进行说明了，不懂得可以参考微信公众平台的简易教程：https://mp.weixin.qq.com/debug/wxadoc/dev/index.html?t=2017117 开发请尽量参考设计规范：https://mp.weixin.qq.com/debug/wxadoc/design/index.html?t=2017119

好了，废话不多说，先直接上效果图。

一共就两个页面。 小程序的网络请求采用的是https请求，如果你的接口不是https，会报效验域名出错，在开发期间可以开启不效验域名。 你也可以通过https proxy代理请求任何http的接口,方便开发期间调试。 可以参考https://weixin.hotapp.cn/

实现代码：

主页

index.wxml

<!--index.wxml--> <view wx:for="{{list}}" wx:key="listId"> <view class="content" bindtap="listenerClick" data-id="{{item.cid}}"> <image class="image" src="{{item.icon}}"></image> <view class="line"></view> <view class="title_view"> <text class="text1">{{item.city}} / {{item.released}}</text> <text class="text2">{{item.title}}</text> </view> </view> </view> <block wx:if="{{hasMore == 1}}"> <view class="loading_view"> <view class="weui-loading"></view> </view> </block> <block wx:elif="{{hasMore == 0}}"> <view class="loading_view"> <text style="font-size: 28rpx;">没有更多数据...</text> </view> </block>

index.wxss

/* index.wxss */ page{ background-color: #999999; } .content{ width: 100%; height: 402rpx; position: relative; display: flex; flex-direction: column } .image{ width: 100%; height: 400rpx; } .title_view{ display: flex; flex-direction: column; position: absolute; bottom: 20rpx; left:10rpx } .text1{ color: #FFFFFF; font-size: 28rpx; } .text2{ color: #FFFFFF; font-size: 32rpx; font-weight: 550 } .loading_view{ width: 100%; height: 100rpx; display: flex; justify-content: center; align-items: center } .line{ width: 100%; height: 2rpx; background-color: #808080 }

index.js

// index.js var hotapp = require('../../utils/hotapp.js'); var app = getApp(); Page({ /** * 页面的初始数据 */ data: { base: 0, list: [], hasMore: -1, isRefresh:false }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.getHttpData() }, getHttpData: function () { console.log("base = "+this.data.base) var that = this; that.setData({ hasMore: 1, isRefresh : true }) hotapp.request({ useProxy: true, url: app.baseurl.servsers +"/lists/?base="+ that.data.base, success: function (res) { console.log(res.data) if (res.data.msg == "OK"){ if (that.data.base == 0) { that.setData({ list: res.data.data }) wx.stopPullDownRefresh() } else { var list = that.data.list for (var i = 0; i < res.data.data.length; i++) { list.push(res.data.data[i]) } that.setData({ list: list }) } that.data.base = that.data.list[that.data.list.length - 1].cid that.setData({ hasMore: -1, isRefresh: false }) }else{ that.setData({ hasMore: 0, isRefresh: false }) } }, fail: function (error) { console.log("服务器异常") }, complete:function () { } }) }, listenerClick:function(e){ var cid = e.currentTarget.dataset.id console.log(cid) wx.navigateTo({ url: '../playAnim/playAnim?cid='+cid, }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { console.log("下拉刷新") this.data.base = 0 this.getHttpData() }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { console.log("上拉加载更多" + this.data.base) if (this.data.isRefresh == false){ this.getHttpData() } }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })

index.json

{ "enablePullDownRefresh": true }

播放页

playAnim.wxml

<!--playAnim.wxml--> <video class="video_view" src="{{videoUrl}}" controls="true" poster="{{poster}}"></video> <view class="content"> <text class="content_title">{{name}}</text> <text class="content_text">{{explain}}</text> </view>

playAnim.wxss

/* playAnim.wxss */ .video_view{ width: 100%; height: 425rpx } .content{ display: flex; flex-direction: column } .content_title{ font-size: 34rpx; color: #686868; margin-top: 30rpx; margin-left: 30rpx } .content_text{ font-size: 30rpx; color: #686868; margin-top: 30rpx; margin-left: 30rpx; margin-right: 30rpx; text-indent:2em; line-height: 45rpx }

playAnim.js

// playAnim.js var hotapp = require('../../utils/hotapp.js') var app = getApp() Page({ /** * 页面的初始数据 */ data: { cid: '', videoUrl:'', poster:'', title:'', name:'', explain:'' }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this that.data.cid = options.cid console.log(that.data.cid) wx.showNavigationBarLoading() wx.showLoading({ title: '加载中', }) hotapp.request({ useProxy: true, url: app.baseurl.servsers +"/url/"+ that.data.cid, success: function (res) { console.log(res.data) var urls = res.data.data.urls var url = urls[urls.length-1].url that.setData({ videoUrl: url, poster: res.data.data.icon, title: res.data.data.name, name: res.data.data.name, explain: res.data.data.explain }) wx.hideNavigationBarLoading() wx.hideLoading() }, fail: function (error) { console.log("服务器异常") }, complete:function () { } }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })

开发完成之后就能提交审核了，我的审核时间大概三天 附上小程序二维码：

最后附上项目源码：https://github.com/guocheng0606/wx-anim-demo