微信小程序实战

最新推荐文章于 2024-09-05 11:20:22 发布

guocheng6

最新推荐文章于 2024-09-05 11:20:22 发布

阅读量618

点赞数 2

文章标签：微信小程序微信

本文链接：https://blog.csdn.net/gc4868142/article/details/72879104

版权

微信小程序在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

guocheng6

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
微信小程序实战

微信小程序在2017年1月9日正式上线，随着逐步的开放和更新，小程序的关注度和热度不断升高，可想未来的发展不容小觑，当然作为移动开发者，我一直保持着高度的关注，刚好最近闲来无事，赶紧接触下小程序。小程序的开发需要在微信公众平台官网注册一个小程序（mp.weixin.qq.com），选择小程序，开始申请，可参考申请文档：https://mp.weixin.qq.com/debug/wxadoc/int
复制链接

扫一扫