微信开发：关于百思不得姐的实战操作指导教程

这篇文章着重讲了微信小程序，阐述了实战小程序实例相关内容，具有这些资料，有需求的朋友能够拿来参考。

微信小程序基本组件以及API被撸完了，终归是要回到正题方面去的，花费了大半天的若干时间制作了一个精简版本的百思不得姐，其中涵盖段子、图片、音频、视频四个模块。这篇会带着大家粗略叙述下这个体积小的APP，源码将会放置到上面，欢迎开始。

项目中我能学到什么？

使用方式

网络调用真实接口

使用

-view实现下拉刷新上拉加载

image组件对图片的处理，

音乐和视频组件的使用

跳转传值使用

等等等。。。。

app.json全局配置文件

{ "pages":[  "pages/word/word",  "pages/image/image",  "pages/voice/voice",  "pages/video/video",  "pages/detail/detail" ], "tabBar": {  "color": "#a9b7b7",  "selectedColor": "#eb4f38",  "borderStyle": "white",  "backgroundColor": "#ffffff",  "list": [   {    "pagePath": "pages/word/word",    "text": "段子",    "iconPath": "image/wordN.png",    "selectedIconPath": "image/wordS.png"   },   {    "pagePath": "pages/image/image",    "text": "图片",    "iconPath": "image/imageN.png",    "selectedIconPath": "image/imageS.png"   },   {    "pagePath": "pages/voice/voice",    "text": "声音",    "iconPath": "image/voiceN.png",    "selectedIconPath": "image/voiceS.png"   },   {    "pagePath": "pages/video/video",    "text": "视频",    "iconPath": "image/videoN.png",    "selectedIconPath": "image/videoS.png"   }  ] }, "window":{  "backgroundTextStyle":"light",  "navigationBarBackgroundColor": "#eb4f38",  "navigationBarTextStyle":"white" }}

这里，我们只需配置程序全局属性，每个页面都得在 pags 属性里引入，有时不显示或许就是因为这个，底部导航 Item 分成四个，就在 list 里面，这里主要配置选中、未选中时的颜色、背景色，以及每个底部选项页面的页面引入和图片引入。属性主要配置窗体整体的颜色、文字颜色和背景色，这里的属性会被每个页面的属性覆盖。

app.wxss

/*整体view样式*/.containsView{ padding: 15rpx 15rpx 15rpx 15rpx; margin-top: 15rpx; margin-bottom: 15rpx; background-color: white;}/*头部整体样式*/.topContainsView{ display: flex; flex-direction: row; align-items: center; margin-bottom: 18rpx;}/** * 头像样式*/.profileImage{ width: 60rpx; height: 60rpx; border-radius: 30rpx;}/*头部显示名字和时间整体样式*/.topRightView{ margin-left: 15rpx; display: flex; flex-direction: column;}/*用户名称样式*/.topRightName{ font-size: 18rpx;}/*时间样式*/.topRightTime{ font-size: 14rpx; color: #b8b2b2; margin-top: 10rpx;}/*因为中间部分不一样不放在整体样式中*//*底部view整体样式*/.bottomView{ display: flex; flex-direction: row; justify-content: space-between; align-items: center;}/*每个Item样式*/.bottomItemView{ display: flex; flex-direction: row; align-items: center; justify-content: center; margin-top: 18rpx; padding-left: 10rpx; padding-right: 10rpx;}/*Item样式中的图标样式 顶 踩 分享 评论*/.bottomItemImage{ width: 45rpx; height: 45rpx;}/*Item中的文字样式 顶 踩 分享 评论*/.bottomItemText{ font-size: 15rpx; color: #b8b2b2; margin-left: 10rpx; margin-top: 8rpx;}/*分割线样式*/.pLine{ background: #f3f3f3; width: 100%; height: 15rpx;}

对于 app.wxss，我把四个模块划分成三个部分，分别是头部，内容区域以及底部，因每个页面的头部与底部样式相同，然而中间的部分却不一样，所以我将那 1，3 抽取到全局当中，注释是比较清晰的。

段子模块

word.wxml

正在加载...                         {{item.name}}     {{item.passtime}}             {{item.text}}                    {{item.ding}}                  {{item.cai}}                  {{item.repost}}                  {{item.comment}}          

外层，我们运用 -view 进行包裹，以此来达成加载更多以及上拉刷新的功能。此属性，表示当滑动至顶部的时候，便会调用这个方法。而这个，是在滑到底部的时候会被调用。起始的意思是，这里能够把头部以及底部布局抽取出来，经由引入的方式加以使用，如此一来，就无需在四个页面都进行编写了，你自己能够尝试操作一下。

word.js

Page({ data: {  list: [],  maxtime: '',  loadingHidden: false }, onLoad: function (options) {  // 页面初始化 options为页面跳转所带来的参数  //加载最新  this.requestData('newlist'); }, /**  * 上拉刷新  */ bindscrolltoupper: function () {  //加载最新  // this.requestData('newlist'); }, /**  * 加载更多  */ bindscrolltolower: function () {  console.log('到底部')  //加载更多  this.requestData('list'); }, /**  * 请求数据  */ requestData: function (a) {  var that = this;  console.log(that.data.maxtime)  wx.request({   url: 'http://api.budejie.com/api/api_open.php',   data: {    a: a,    c: 'data',    maxtime: that.data.maxtime,    type: '29',   },   method: 'GET',   success: function (res) {    console.log(res)    console.log('上一页', that.data.list)    that.setData({     // 拼接数组     list: that.data.list.concat(res.data.list),     loadingHidden: true,     maxtime: res.data.info.maxtime    })   }  }) }, onReady: function () {  // 页面渲染完成 }, onShow: function () {  // 页面显示 }, onHide: function () {  // 页面隐藏 }, onUnload: function () {  // 页面关闭 }})

这里借助方法来加载数据，此方法接纳一个参数，凭借这个参数来决定加载最新的还是更多的内容，依靠这个参数去加载下一页，把上一页的情况当作加载下一页的条件，加载下一页数据时我们运用方法对数组予以拼接，同时改变加载状态。word.wxml和word.json里面，一个负责设置内容字体大小，另一个负责设置导航条字，就不展示了。

图片模块

image.wxml

正在加载...                         {{item.name}}     {{item.passtime}}          {{item.text}}                                             点击查看全图                           {{item.ding}}                  {{item.cai}}                  {{item.repost}}                  {{item.comment}}          

这里着重瞧中间部分，我们凭借是否为gif来辨别处理图片，非gif的话能够点击用以查看大图，这里存在一个view悬浮效果，结合界面与image.wxss去看。

image.wxss

/*中间文字样式*/.centerContent{ margin-top: 20rpx; width: 100%; height: 600rpx;}/*中间浮动文字样式*/.flexView{display: flex;justify-content: center;align-items: center;width: 100%;height: 80rpx;position: absolute;z-index: 2;top: 540rpx;background: #000000;opacity: 0.6}/*浮动文字*/.flexText{ color: white; font-size: 35rpx;}

image.js

var detail = '../detail/detail'Page({ data: {  list: [],  maxtime: '',  loadingHidden: false }, onLoad: function (options) {  // 页面初始化 options为页面跳转所带来的参数  this.requestData('newlist'); }, /**  * 滚动到底部时加载下一页  */ bindscrolltolower: function () {  console.log('到底部')  this.requestData('list'); }, /**  * 加载数据  */ requestData: function (a) {  var that = this;  wx.request({   url: 'http://api.budejie.com/api/api_open.php',   data: {    a: a,    c: 'data',    // 上一页的maxtime作为加载下一页的条件，    maxtime: this.data.maxtime,    type: '10',   },   method: 'GET',   success: function (res) {    console.log(res)    console.log('上一页', that.datalist)    that.setData({     // 拼接数组     list: that.data.list.concat(res.data.list),     loadingHidden: true,     maxtime: res.data.info.maxtime    })   }  }) }, /**  * 查看大图  */ lookBigPicture: function (e) {  console.log(e);  console.log(e.currentTarget.id)  //图片url 对应wxml中data-url="{{item.url}}"  var url = e.currentTarget.dataset.url;  //获取图片高度 对应wxml中data-height="{{item.height}}"  var height = e.currentTarget.dataset.height;  //获取图片高度 对应wxml中data-width="{{item.width}}"  var width = e.currentTarget.dataset.width;  // 传参方式向GET请求  wx.navigateTo({   url: detail + '?' + 'url=' + url + "&height=" + height + "&width=" + width,   success: function (res) {    console.log(res)   },   fail: function (err) {    console.log(err)   },  }) }, onReady: function () {  // 页面渲染完成 }, onShow: function () {  // 页面显示 }, onHide: function () {  // 页面隐藏 }, onUnload: function () {  // 页面关闭 }})

这里重点瞧方法，其中处于特定位置的代码，诸如view data-url=”{{item.}}” ，处于另一个特定位置代码是data-=”{{item.}}” ，还有处于又一特定位置代码为data-width=”{{item.width}}” ，这些在逻辑代码里会被转变成为另一种形式，按照这个 . 所涉及的语法去运用，具体是使用var url = e...url; ，至于所谓传值调转恰似一种行为，这种行为就如同向GET发送请求那样，必须要精准依照格式去完成，完成即可。