This article mainly introduces relevant information about WeChat Mini Program practical mini program examples. Friends who need it can refer to it
The basic components and API of WeChat Mini Program have been released Finally, I have to get back to the topic. I spent most of the day making a streamlined version of Baisi Bujie, including four modules: jokes, pictures, audio, and video. This article will give you a brief introduction to this small APP. The source code will be put on GitHub and you are welcome to start.
What can I learn from the project?
tabbar usage
Network call realInterface
loading uses
scroll-view to implement pull-down refresh and pull-up loading.
image component processes images,
Music and VideoUsage of components
JumpPass valueUse
-
wait wait wait. . . .
app.jsonGlobalConfiguration file
{ "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" } }
Here we only need to configure the programGlobal properties, each page needs to be introduced in the pags attribute. Sometimes the tabbar does not display, it may be because of this, the bottom of the tabbarNavigationItem is divided into four items in the list. The main configuration here is the selected and unselected color, background color, page introduction and picture introduction for each bottom option page. The window attribute mainly configures the overall color, text color and background color of the form. The window attribute here will be overridden by the window attribute of each page.
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.wxssme Divide the four modules into three parts: header, content area, and bottom. Because the header and bottom styles of each page are the same but the middle part is different, I extracted 1 and 3 into the global, Comments Relatively clear
paragraph module
word.wxml
##
<loading hidden="{{loadingHidden}}">正在加载...</loading> <scroll-view scroll-y="true" bindscrolltoupper="bindscrolltoupper" bindscrolltolower="bindscrolltolower" style="height: 100%"> <block wx:for-items="{{list}}"> <!-- 分割线 --> <view class="pLine"></view> <!-- 整体item样式 --> <view class="containsView"> <view class="topContainsView"> <image class="profileImage" src="{{item.profile_image}}" /> <view class="topRightView"> <text class="topRightName">{{item.name}}</text> <text class="topRightTime">{{item.passtime}}</text> </view> </view> <!-- 中间内容 --> <text class="centerContent">{{item.text}}</text> <!-- 底部view样式 --> <view class="bottomView"> <view class="bottomItemView"> <image class="bottomItemImage" src="../../image/ding.png" /> <text class="bottomItemText">{{item.ding}}</text> </view> <view class="bottomItemView"> <image class="bottomItemImage" src="../../image/cai.png" /> <text class="bottomItemText">{{item.cai}}</text> </view> <view class="bottomItemView"> <image class="bottomItemImage" src="../../image/share.png" /> <text class="bottomItemText">{{item.repost}}</text> </view> <view class="bottomItemView"> <image class="bottomItemImage" src="../../image/comment.png" /> <text class="bottomItemText">{{item.comment}}</text> </view> </view> </view> </block> </scroll-view>We wrap the outer layer with scroll-view. To achieve loading more and pull-up refresh bindscrolltoupper=”bindscrolltoupper” this attribute will call this method when sliding to the top bindscrolltolower=”bindscrolltolower” this will be called when sliding to the bottom. At the beginning, the header and bottom layouts can also be extracted by introducing If you use it in this way, you don’t need to write all four pages. You can get it yourself
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 () { // 页面关闭 } })
Image module
image.wxml
<loading hidden="{{loadingHidden}}">正在加载...</loading> <scroll-view scroll-y="true" bindscrolltolower="bindscrolltolower" style="height: 100%"> <block wx:for-items="{{list}}"> <!-- 分割线 --> <view class="pLine"></view> <!-- 整体item样式 --> <view class="containsView"> <view class="topContainsView"> <image class="profileImage" src="{{item.profile_image}}" /> <view class="topRightView"> <text class="topRightName">{{item.name}}</text> <text class="topRightTime">{{item.passtime}}</text> </view> </view> <text style="font-size: 30rpx">{{item.text}}</text> <!-- 当时gif图 --> <view wx:if="{{item.is_gif != 0}}" style="position: relative;"> <image class="centerContent" src="{{item.cdn_img}}" mode="aspectFill" /> </view> <!-- 普通大图 可点击查看全部图片 --> <view data-url="{{item.cdn_img}}" data-height="{{item.height}}" data-width="{{item.width}}" bindtap="lookBigPicture" wx:elif="{{item.is_gif == 0}}" style="position: relative;"> <!-- 图片资源 --> <image class="centerContent" src="{{item.cdn_img}}" mode="aspectFill" /> <!-- 图片上浮动的点击查看详情图片view --> <view class="flexView"> <image src="../../image/seeBigPicture.png" style="width: 60rpx; height: 60rpx;" /> <text class="flexText">点击查看全图</text> </view> </view> <!-- 底部view样式 --> <view class="bottomView"> <view class="bottomItemView"> <image class="bottomItemImage" src="../../image/ding.png" /> <text class="bottomItemText">{{item.ding}}</text> </view> <view class="bottomItemView"> <image class="bottomItemImage" src="../../image/cai.png" /> <text class="bottomItemText">{{item.cai}}</text> </view> <view class="bottomItemView"> <image class="bottomItemImage" src="../../image/share.png" /> <text class="bottomItemText">{{item.repost}}</text> </view> <view class="bottomItemView"> <image class="bottomItemImage" src="../../image/comment.png" /> <text class="bottomItemText">{{item.comment}}</text> </view> </view> </view> </block> </scroll-view>
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 () { // 页面关闭 } })Here we mainly look at the lookBigPicture method view data-url=”{{item.cdn_img}}” data-height=”{{item.height}}” data-width="{{item.width}}" will be installed in the logic code. The syntax is var url = e.currentTarget.dataset.url; if the value is transferred, the request will be sent to GET according to the format.【related suggestion】
1. WeChat public account platform source code download
2. Voting source code download
The above is the detailed content of Practical Tutorial on WeChat Development. For more information, please follow other related articles on the PHP Chinese website!

本篇文章给大家带来了关于微信小程序的相关问题,其中主要介绍了关于基础架构原理的相关内容,其中包括了宿主环境、执行环境、小程序整体架构、运行机制、更新机制、数据通信机制等等内容,下面一起来看一下,希望对大家有帮助。

本篇文章给大家带来了关于微信小程序的相关知识,其中主要介绍了关于云服务的配置详解,包括了创建使用云开发项目、搭建云环境、测试云服务等等内容,下面一起来看一下,希望对大家有帮助。

本篇文章给大家带来了关于微信小程序的相关知识,其中主要介绍了关于富文本编辑器的实战示例,包括了创建发布页面、实现基本布局、实现编辑区操作栏的功能等内容,下面一起来看一下,希望对大家有帮助。

西安坐地铁用的小程序为“乘车码”。使用方法:1、打开手机微信客户端,点击“发现”中的“小程序”;2、在搜索栏中输入“乘车码”进行搜索;3、直接定位城市西安,或者搜索西安,点击“西安地铁乘车码”选项的“去乘车”按钮;4、根据腾讯官方提示进行授权,开通“乘车码”业务即可利用该小程序提供的二维码来支付乘车了。

本篇文章给大家带来了关于微信小程序的相关问题,其中主要介绍了关于开发工具介绍的相关内容,包括了下载开发工具以及编辑器总结等内容,下面一起来看一下,希望对大家有帮助。

本篇文章给大家带来了关于微信小程序的相关知识,其中主要介绍了怎么实现小程序授权登录功能的相关内容,下面一起来看一下,希望对大家有帮助。


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

WebStorm Mac version
Useful JavaScript development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

SublimeText3 Chinese version
Chinese version, very easy to use

Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

Dreamweaver Mac version
Visual web development tools
