别人写的微信小程序，收藏借鉴！
2024-05-11 17:12:45
github地址：https://github.com/yesifeng/wechat-weapp-movie
提示：v2.0代码会跟文档有一些出入，但大部分都是相同的
第一步 项目配置
一、编写app.json
对整个项目的公共配置
1、pages：配置页面路径（必须），列出所有的页面的路径，所有存在的页面都需要在此写出，否则在页面跳转的时候会报出找不到页面的错误
2、window：窗口配置，配置导航及窗口的背景色和文字颜色，还有导航文字和是否允许窗口进行下拉刷新
3、tabBar：tab栏配置，配置tab栏背景色及出现位置，上边框的颜色（目前只支持黑或白），文字颜色及文字选中颜色，最核心的配置是list即tab栏的列表，官方规定最少2个，最多5个，每个列表项目可配置页面路径、文字、图标及选中时图标的地址
4、network：网络配置，配置网络请求、上传下载文件、socket连接的超时时间
5、debug：调试模式，建议开发时开启（true），可以看到页面注册、页面跳转及数据初始化的信息，另外报错的错误信息也会比较详细
{"pages": ["pages/popular/popular","pages/coming/coming","pages/top/top","pages/search/search","pages/filmDetail/filmDetail","pages/personDetail/personDetail","pages/searchResult/searchResult"],"window": {"navigationBarBackgroundColor": "#47a86c","navigationBarTextStyle": "white","navigationBarTitleText": "电影推荐","backgroundColor": "#fff","backgroundTextStyle": "dark"},"tabBar": {"color": "#686868","selectedColor": "#47a86c","backgroundColor": "#ffffff","borderStyle": "white","list": [{"pagePath": "pages/popular/popular","iconPath": "dist/images/popular_icon.png","selectedIconPath": "dist/images/popular_active_icon.png","text": "热映"}, {"pagePath": "pages/coming/coming","iconPath": "dist/images/coming_icon.png","selectedIconPath": "dist/images/coming_active_icon.png","text": "待映"},{"pagePath": "pages/search/search","iconPath": "dist/images/search_icon.png","selectedIconPath": "dist/images/search_active_icon.png","text": "搜索"},{"pagePath": "pages/top/top","iconPath": "dist/images/top_icon.png","selectedIconPath": "dist/images/top_active_icon.png","text": "口碑"}]},"networkTimeout": {"request": 10000,"downloadFile": 10000},"debug": true
}
二、确定目录结构
根据UI图，提取组件和公共样式/脚本，以及page的目录
- comm - 公用的脚本及样式
- script - 公共脚本
- config.js 配置信息 （单页数据量，城市等）
- fetch.js 接口调用 （电影列表及详情，人物详情、搜索）
- style - 公共样式
- animation.wxss 动画
- script - 公共脚本
- component - 公用的组件
- filmList - 电影列表
- filmList.wxml - 组件结构
- filmList.wxss - 组件样式
- filmList - 电影列表
- dist - 静态资源
- images 本地图片，主要存导航的图标 （样式中不可引用本地图像资源）
- pages - 页面
- popular - 页面文件夹 （"popular"为自定义的页面名称，页面相关文件的文件名需与页面名相同）
- popular.js 页面逻辑
- popular.wxml 页面结构
- popular.wxss 页面样式
- popular.json 页面窗口配置 （可参考app.json中的window配置）
- popular - 页面文件夹 （"popular"为自定义的页面名称，页面相关文件的文件名需与页面名相同）
- app.js - 小程序整体逻辑 （初始化、显示、隐藏的事件，以及存放全局数据）
- app.json - 小程序公共配置
- app.wxss - 小程序公共样式
第二步 编写组件
电影列表
结构
<template name="filmList">
<block wx:if="{{showLoading}}"><view class="loading">玩命加载中…</view>
</block>
<block wx:else><scroll-view scroll-y="true" style="height: {{windowHeight}}rpx" bindscroll="scroll" bindscrolltolower="scrolltolower"><view class="film"><block wx:for="{{films}}" wx:for-index="filmIndex" wx:for-item="filmItem" wx:key="film"><view data-id="{{filmItem.id}}" class="film-item" catchtap="viewFilmDetail"><view class="film-cover"><image src="{{filmItem.images.large}}" class="film-cover-img"></image><view class="film-rating"><block wx:if="{{filmItem.rating.average == 0}}">暂无评分</block><block wx:else>{{filmItem.rating.average}}分</block></view></view><view class="file-intro"><view class="film-title">{{filmItem.title}}</view><view class="film-tag"><view class="film-tag-item" wx:for="{{filmItem.genres}}" wx:for-item="filmTagItem" wx:key="filmTag" data-tag="{{filmTagItem}}" catchtap="viewFilmByTag">{{filmTagItem}}</view></view></view></view></block><block wx:if="{{hasMore}}"><view class="loading-tip">拼命加载中…</view></block><block wx:else><view class="loading-tip">没有更多内容了</view></block></view></scroll-view>
</block>
</template>
样式
import "../../comm/style/animation.wxss";
.film {box-sizing: border-box;width: 750rpx;padding: 10rpx;display: flex;flex-wrap: wrap;flex-direction: row;justify-content: space-around;box-shadow: 0 0 40rpx #f4f4f4 inset;
}
.film-item {width: 350rpx;margin-bottom: 20rpx;border-radius: 10rpx;background-color: #fff;border: 1px solid #e4e4e4;box-shadow: 0 20rpx 40rpx #eee;overflow: hidden;animation: fadeIn 1s;
}
.film-cover, .film-cover-img {width: 350rpx;height: 508rpx;
}
.film-cover {position: relative;border-radius: 10rpx;overflow: hidden;
}
.film-rating {box-sizing: border-box;position: absolute;bottom: 0;left: 0;width: 100%;height: 50rpx;padding-right: 20rpx;font-size: 12px;text-align: right;line-height: 50rpx;background-color: rgba(0, 0, 0, .65);color: #fff;
}
.file-intro {padding: 16rpx;margin-top: -8rpx;
}
.film-title {white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
}
.film-tag {width: 100%;margin-top: 10rpx;display: flex;justify-content: flex-start;
}
.film-tag-item {padding: 4rpx 6rpx;margin-right: 10rpx;font-size: 24rpx;box-shadow: 0 0 0 1px #ccc;border-top: 1px solid #fff;border-radius: 10rpx;background-color: #fafafa;color: #666;
}
.loading-tip {width: 100%;height: 80rpx;line-height: 80rpx;text-align: center;color: #ccc;
}
使用方法
以popular（热映）页面为例
在popular.wxml中插入以下代码引入组件结构：
<import src="../../component/filmList/filmList.wxml"/>
<template is="filmList" data="{{films: films, hasMore: hasMore, showLoading: showLoading, start: start, windowHeight: windowHeight}}"/>
在popular.wcss中插入一下代码引入组件样式：
import "../../component/filmList/filmList.wxss";
- import 引入组件（模板）
- template 使用组件（模板） data属性可以给模板传入数据
消息提示
结构
<template name="message"><view class="message-area" hidden="{{message.visiable ? false : true}}"><view class="message"><view class="message-icon message-icon-{{message.icon}}"></view><view class="message-content">{{message.content}}</view></view></view>
</template>
样式
@import "../../component/filmList/filmList.wxss";
.message-area {position: fixed;width: 100%;height: 100%;z-index: 99;
}
.message {box-sizing: border-box;position: fixed;z-index: 999;left: 50%;top: 50%;width: 200rpx;height: 200rpx;padding: 30rpx;margin-top: -100rpx;margin-left: -100rpx;display: flex;flex-wrap: wrap;justify-content: center;border-radius: 16rpx;background-color: rgba(0, 0, 0, .75);color: #fff;animation: fadeIn .3s;
}
.message-icon {height: 100rpx;width: 100rpx;background-position: center;background-repeat: no-repeat;background-size: 100rpx;
}
.message-icon-success {background-image: url('http://139.196.214.241:8093/cdn/images/weui-success-icon.png');
}
.message-icon-warning {background-image: url('http://139.196.214.241:8093/cdn/images/weui-warning-icon.png');
}
.message-icon-info {background-image: url('http://139.196.214.241:8093/cdn/images/weui-info-icon.png');
}
.message-content {margin-top: 15rpx;text-align: center;
}
逻辑
module.exports = {show: function(cfg) {var that = thisthat.setData({message: {content: cfg.content,icon: cfg.icon,visiable: true}})if (typeof cfg.duration !== 'undefined') {setTimeout(function(){that.setData({message: {visiable: false}})}, cfg.duration)}},hide: function() {var that = thisthat.setData({message: {visiable: true}})}
}
使用方法
以search（搜索）页面为例
在search.wxml中插入以下代码引入组件结构：
<import src="../../component/message/message.wxml"/>
<template is="message" data="{{message: message}}"/>
在search.wcss中插入一下代码引入组件样式：
@import "../../component/message/message.wxss";
在search.js中插入一下代码引入组件逻辑：
var message = require('../../component/message/message')
message.show.call(that,{content: '请输入内容',icon: 'info',duration: 1500
})
- import 引入组件（模板）
- template 使用组件（模板） data属性可以给模板传入数据
- require 引入文件中 module.exports导出的数据或方法
- 调用方法：message.show.call(cfg)
第二步 编写公共脚本
请求接口
列表：
- fetchFilms：获取电影列表（热映、待映、排行、搜索结果页面）
- fetchFilmDetail：获取电影详情
- fetchPersonDetail：获取人物详情
- search：搜索关键词或是类型（返回的是电影列表）
var config = require('./config.js')
module.exports = {fetchFilms: function(url, city, start, count, cb) {var that = thisif (that.data.hasMore) {fetch(url + '?city=' + config.city + '&start=' + start + '&count=' + count).then(function(response){response.json().then(function(data){if(data.subjects.length === 0){that.setData({hasMore: false,})}else{that.setData({films: that.data.films.concat(data.subjects),start: that.data.start + data.subjects.length,showLoading: false})}typeof cb == 'function' && cb(res.data)})})}},fetchFilmDetail: function(url, id, cb) {var that = this;fetch(url + id).then(function(response){response.json().then(function(data){that.setData({showLoading: false,filmDetail: data})wx.setNavigationBarTitle({title: data.title})typeof cb == 'function' && cb(data)})})},fetchPersonDetail: function(url, id, cb) {var that = this;fetch(url + id).then(function(response){response.json().then(function(data){that.setData({showLoading: false,personDetail: data})wx.setNavigationBarTitle({title: data.name})typeof cb == 'function' && cb(data)})})},search: function(url, keyword, start, count, cb){var that = thisvar url = decodeURIComponent(url)if (that.data.hasMore) {fetch(url + keyword + '&start=' + start + '&count=' + count).then(function(response){response.json().then(function(data){if(data.subjects.length === 0){that.setData({hasMore: false,showLoading: false})}else{that.setData({films: that.data.films.concat(data.subjects),start: that.data.start + data.subjects.length,showLoading: false})wx.setNavigationBarTitle({title: keyword})}typeof cb == 'function' && cb(res.data)})})}}
}
项目配置
city：城市
count：数量
module.exports = {city: '杭州',count: 20
}
第三步 编写页面
popular（热映）页面
这里以热映页面为例
待映、口碑排行、搜索结果页面可以以此类推
- popular.json
配置窗口标题以及允许下拉刷新
{"navigationBarTitleText": "正在热映","enablePullDownRefresh": true
}
- popular.wxml
直接引入电影列表组件 与coming（待映）页、top（口碑排行）页、搜索结果页相同
<import src="../../component/filmList/filmList.wxml"/>
<template is="filmList" data="{{films: films, hasMore: hasMore, showLoading: showLoading, start: start, windowHeight: windowHeight}}"/>
- popular.wxss
@import "../../component/filmList/filmList.wxss";
- popular.js
- 数据说明
- films：电影列表
- hasmore：上拉加载时是否还有更多数据
- showLoading：是否显示loading动画
- start：数据开始位置，用于上拉加载（每次累加）
- windowHeight： 获取窗口高度，用于给scroll-view加高度（小程序中样式好像不能获取到窗口高度，用100%也没用，所以用js获取）
- 页面事件
- onLoad：页面载入，通过引入的fetch请求网络接口获取电影列表
douban.fetchFilms.call(that, url, config.city, that.data.start, config.count)- onShow：页面显示，通过
wx.getSystemInfo()获取窗口高度- scroll：scroll-view滚动事件
- scrolltolower：滚动到底部触发的事件，即上拉加载更多数据。调用载入时请求的方法（此时start的值为20）
douban.fetchFilms.call(that, url, config.city, that.data.start, config.count)- onPullDownRefresh：下拉刷新，初始化数据、显示加载动画并再次调用数据
- viewFilmDetail：查看电影详情，通过
e.currentTarget.dataset获取标签中的data-*的数据，然后在路径中传递id给filmDetail页面- viewFilmByTag：点击标签（类型）时进入对应类型的搜索页
var douban = require('../../comm/script/fetch')
var config = require('../../comm/script/config')
var url = 'https://api.douban.com/v2/movie/in_theaters'
var searchByTagUrl = 'https://api.douban.com/v2/movie/search?tag='
Page({data: {films: [],hasMore: true,showLoading: true,start: 0,windowHeight: 0},onLoad: function() {var that = thisdouban.fetchFilms.call(that, url, config.city, that.data.start, config.count)},onShow: function() {var that = thiswx.getSystemInfo({success: function(res) {that.setData({windowHeight: res.windowHeight*2})}})},scroll: function(e) {console.log(e)},scrolltolower: function() {var that = thisdouban.fetchFilms.call(that, url, config.city, that.data.start, config.count)},onPullDownRefresh: function() {var that = thisthat.setData({films: [],hasMore: true,showLoading: true,start: 0})douban.fetchFilms.call(that, url, config.city, that.data.start, config.count)},viewFilmDetail: function(e) {var data = e.currentTarget.dataset;wx.navigateTo({url: "../filmDetail/filmDetail?id=" + data.id})},viewFilmByTag: function(e) {var data = e.currentTarget.datasetvar keyword = data.tagwx.navigateTo({url: '../searchResult/searchResult?url=' + encodeURIComponent(searchByTagUrl) + '&keyword=' + keyword})}
})
filmDetail（电影详情）页面
这里以电影页面为例
人物详情页面可以以此类推
- filmDetail.json
配置窗口标题
{"navigationBarTitleText": "电影详情"
}
- filmDetail.wxml
<view class="container"><block wx:if="{{showLoading}}"><view class="loading">玩命加载中…</view></block><block wx:else><!-- fd: film detail --><view class="fd-hd"><view class="fd-hd-bg" style="background-image: url({{filmDetail.images.large}})"></view><image src="{{filmDetail.images.large}}" class="fd-cover"></image><view class="fd-intro"><view class="fd-title">{{filmDetail.title}}</view><view class="fd-intro-txt">导演：{{filmDetail.directors[0].name}}</view><view class="fd-intro-txt">演员：<block wx:for="{{filmDetail.casts}}" wx:for-item="filmDetailCastItem" wx:for-index="filmDetailCastIndex" wx:key="filmDetailCastItem">{{filmDetailCastItem.name}}<block wx:if="{{filmDetailCastIndex !== filmDetail.casts.length - 1}}">/</block></block></view><view class="fd-intro-txt">豆瓣评分：<block wx:if="{{filmDetail.rating.average == 0}}">暂无评分</block><block wx:else>{{filmDetail.rating.average}}分</block></view><view class="fd-intro-txt">上映年份：{{filmDetail.year}}年</view></view></view><view class="fd-data"><view class="fd-data-item"><view class="fd-data-num">{{filmDetail.collect_count}}</view><view class="fd-data-title">看过</view></view><view class="fd-data-item"><view class="fd-data-num">{{filmDetail.wish_count}}</view><view class="fd-data-title">想看</view></view><view class="fd-data-item"><view class="fd-data-num">{{filmDetail.ratings_count}}</view><view class="fd-data-title">评分人数</view></view></view><view class="fd-bd"><view class="fd-bd-title">剧情简介</view><view class="fd-bd-intro">{{filmDetail.summary}}</view><view class="fd-bd-title">导演/演员</view><view class="fd-bd-person"><view class="fd-bd-person-item" data-id="{{filmDetail.directors[0].id}}" bindtap="viewPersonDetail"><image class="fd-bd-person-avatar" src="{{filmDetail.directors[0].avatars.medium}}"></image><view class="fd-bd-person-name">{{filmDetail.directors[0].name}}</view><view class="fd-bd-person-role">导演</view></view><block wx:for="{{filmDetail.casts}}" wx:for-item="filmDetailCastItem" wx:key="filmDetailCastItem"><view class="fd-bd-person-item" data-id="{{filmDetailCastItem.id}}" bindtap="viewPersonDetail"><image class="fd-bd-person-avatar" src="{{filmDetailCastItem.avatars.medium}}"></image><view class="fd-bd-person-name">{{filmDetailCastItem.name}}</view><view class="fd-bd-person-role">演员</view></view></block></view><view class="fd-bd-title">标签</view><view class="fd-bd-tag"><block wx:for="{{filmDetail.genres}}" wx:for-item="filmDetailTagItem" wx:key="filmDetailTagItem"><view class="fd-bd-tag-item" data-tag="{{filmDetailTagItem}}" catchtap="viewFilmByTag">{{filmDetailTagItem}}</view></block></view></view></block>
</view>
- filmDetail.wxss
@import "../../comm/style/animation.wxss";
.fd-hd {position: relative;width: 100%;height: 600rpx;display: flex;justify-content: center;align-content: center;overflow: hidden;
}
.fd-hd:before {content: '';display: block;position: absolute;z-index: 1;width: 100%;height: 600rpx;background-color: rgba(0, 0, 0, .6);
}
.fd-hd-bg {position: absolute;z-index: 0;width: 100%;height: 600rpx;background-size: cover;background-position: center;filter: blur(30rpx);
}
.fd-cover {z-index: 2;width: 300rpx;height: 420rpx;margin-top: 80rpx;border-radius: 8rpx;box-shadow: 0 30rpx 150rpx rgba(255, 255, 255, .3)
}
.fd-intro {z-index: 2;width: 320rpx;margin-top: 80rpx;margin-left: 40rpx;color: #fff;
}
.fd-title {margin-bottom: 30rpx;font-size: 42rpx;
}
.fd-intro-txt {margin-bottom: 18rpx;color: #eee;
}
.fd-data {display: flex;height: 150rpx;justify-content: space-around;align-items: center;border-bottom: 1px solid #f4f4f4;
}
.fd-data-item {width: 33.33%;text-align: center;
}
.fd-data-item {border-left: 1px solid #eee;
}
.fd-data-item:first-child {border-left: none;
}
.fd-data-num {font-size: 40rpx;font-weight: 100;color: #444;
}
.fd-data-title {color: #999;
}
.fd-bd {padding: 0 40rpx 40rpx;
}
.fd-bd-title {padding-left: 20rpx;margin-top: 40rpx;margin-bottom: 20rpx;font-size: 32rpx;font-weight: bold;color: #444;border-left: 10rpx solid #47a86c;
}
.fd-bd-intro {text-align: justify;line-height: 1.5;color: #666;
}
.fd-bd-tag {display: flex;
}
.fd-bd-tag-item {padding: 5rpx 10rpx;margin-right: 15rpx;border: 1px solid #ccc;border-radius: 10rpx;color: #666;
}
.fd-bd-person {display: flex;width: 100%;height: 480rpx;overflow-x: scroll;overflow-y: hidden;
}
.fd-bd-person-item {margin-left: 20rpx;text-align: center;
}
.fd-bd-person-item:first-child {margin-left: 0;
}
.fd-bd-person-avatar {width: 280rpx;height: 400rpx;
}
.fd-bd-person-name {color: #666;
}
.fd-bd-person-role {color: #999
}
- filmDetail.js
- 数据说明
- filmDetail：电影详情数据
- showLoading：是否显示loading动画
- 页面事件
- onLoad：页面载入，获取从电影列表传入的id （在
options中），通过fetch请求网络接口获取电影详情
douban.fetchFilmDetail.call(that, url, id)- viewPersonDetail：查看人物详情，通过
e.currentTarget.dataset获取标签中的data-*的数据，然后在路径中传递id给personDetail页面- viewFilmByTag：点击标签（类型）时进入对应类型的搜索页
var douban = require('../../comm/script/fetch')
var url = 'https://api.douban.com/v2/movie/subject/'
var searchByTagUrl = 'https://api.douban.com/v2/movie/search?tag='
Page({data: {filmDetail: {},showLoading: true},onLoad: function(options) {var that = thisvar id = options.iddouban.fetchFilmDetail.call(that, url, id)},viewPersonDetail: function(e) {var data = e.currentTarget.dataset;wx.redirectTo({url: '../personDetail/personDetail?id=' + data.id})},viewFilmByTag: function(e) {var data = e.currentTarget.datasetvar keyword = data.tagwx.navigateTo({url: '../searchResult/searchResult?url=' + encodeURIComponent(searchByTagUrl) + '&keyword=' + keyword})}
})
search（搜索）页面
- search.json
配置窗口标题
{"navigationBarTitleText": "搜索"
}
- search.wxml
引用了message组件，当没有输入内容时给出提示
<import src="../../component/message/message.wxml"/>
<template is="message" data="{{message: message}}"/>
<view class="search-hd"><view class="search-area"><form bindsubmit="search"><view class="search-type" bindtap="changeSearchType">{{searchType == 0 ? '默认' : '类型'}}</view><input class="search-txt" name="keyword" auto-focus placeholder="{{searchType == 0 ? '请输入电影标题、演员或导演' : '请输入影片类型，如：爱情、喜剧'}}"/><button class="search-btn" formType="submit">搜索</button></form></view><view class="search-keyword"><view class="search-keyword-title">热门搜索</view><view wx:for="{{hotKeyword}}" wx:for-item="hotKeywordItem" wx:key="hotKeywordItem" class="search-keyword-item" data-keyword="{{hotKeywordItem}}" bindtap="searchByKeyword">{{hotKeywordItem}}</view><view class="search-keyword-title">热门标签</view><view wx:for="{{hotTag}}" wx:for-item="hotTagItem" wx:key="hotTagItem" class="search-keyword-item" data-keyword="{{hotTagItem}}" bindtap="searchByTag">{{hotTagItem}}</view> </view>
</view>
- search.js
- 数据说明
- searchType：搜索类型 0为关键词，1为类型（标签）
- hotKeyword：热门关键词
- hotTag：热门标签
- 页面事件
- changeSearchType：改变搜索类型，通过
wx.showActionSheet- search：搜索表单提交事件，如果没有输入内容，则自定义消息组件的show方法即
message.show.call(cfg)来提示用户，有内容则通过e.detail.value来获取表单的数据，并传递给searchDetail（搜索结果页）- searchByKeyword：点击关键词时进入对应类型的搜索页
- viewFilmByTag：点击标签（类型）时进入对应类型的搜索页
var message = require('../../component/message/message')
var douban = require('../../comm/script/fetch')
var url = ['https://api.douban.com/v2/movie/search?q=', 'https://api.douban.com/v2/movie/search?tag=']Page({data:{searchType: 0,hotKeyword: ['功夫熊猫', '烈日灼心', '摆渡人', '长城', '我不是潘金莲', '这个杀手不太冷', '驴得水', '海贼王之黄金城', '西游伏妖片', '我在故宫修文物', '你的名字'],hotTag: ['动作', '喜剧', '爱情', '悬疑']},changeSearchType: function() {var types = ['默认', '类型'];var that = thiswx.showActionSheet({itemList: types,success: function(res) {if (!res.cancel) {that.setData({searchType: res.tapIndex})}}})},search: function(e) {var that = thisvar keyword = e.detail.value.keywordif (keyword == '') {message.show.call(that,{content: '请输入内容',icon: 'info',duration: 1500})return false} else {wx.navigateTo({url: '../searchResult/searchResult?url=' + encodeURIComponent(url[that.data.searchType]) + '&keyword=' + keyword})}},searchByKeyword: function(e) {var that = thisvar keyword = e.currentTarget.dataset.keywordwx.navigateTo({url: '../searchResult/searchResult?url=' + encodeURIComponent(url[0]) + '&keyword=' + keyword})},searchByTag: function(e) {var that = thisvar keyword = e.currentTarget.dataset.keywordwx.navigateTo({url: '../searchResult/searchResult?url=' + encodeURIComponent(url[1]) + '&keyword=' + keyword})}
})
附录
UI
- 页面加载
screenshot-1
- 电影列表
screenshot-2
- 下拉刷新
screenshot-3
- 电影详情
screenshot-4
- 任务详情
screenshot-5
- 搜索
screenshot-6
- 搜索结果 (关键词搜索)
screenshot-7
- 搜索结果 (标签/类型搜索)
screenshot-8
- 信息提示
screenshot-9
思维导图
mindMap
豆瓣api代替https://douban.uieee.com/
作者：sesine
链接：https://www.jianshu.com/p/447b36463f09
别人写的微信小程序，收藏借鉴！相关推荐
- 手把手教你写个微信小程序
手把手教你写个微信小程序 很多人看完bmob快速入门,并完成了bmob的基本配置之后依然不知道如何下手去写自己的代码,那么跟着我一起来一步一步做个小程序吧. 工具:Bmob后端云 新建小程序项目 一. ...
- 微信小程序———收藏
微信小程序---收藏 当我们到详情页面时首先 从本地那到数据看 收藏的数据 里面是否有 本条数据 有的话 就需要把收藏图标点亮 css里写一个类名 然后就是 神奇的操作了 data:{p ...
- 手把手教你写一个微信小程序日历组件
今天我们一起写一个微信小程序日历组件 微信小程序日历组件 github.com/749264345/w- 好,我们先看一下要实现的模样,如下图 由以上截图我们可以看到 1.日历可以通过按钮[切换展示效 ...
- 微信 php收藏功能实现,关于微信小程序收藏功能的实现
这篇文章主要介绍了微信小程序收藏功能的实现代码,基本功能是点击收藏后显示已收藏,在另一个页面出现目前点击收藏的项目.需要的朋友可以参考下 需求 点击收藏后显示已收藏,在另一个页面出现目前点击收藏的项目 ...
- 写在微信小程序上线之夜，我想对移动开发人员说别慌先玩玩AR压压惊！
转载请注明出处:http://blog.csdn.net/linglongxin24/article/details/54296650 本文出自[DylanAndroid的博客] 写在微信小程序上线之 ...
- 追书神器的api接口写的微信小程序
@这是我基于追书神器的api接口写的微信小程序 这是我小程序的二维码
- 微信小程序 - 收藏集 - 掘金
微信小程序 silk 录音文件转 mp3 - 前端 - 掘金 这几天做开发寻思给自己的小程序添加一个录音的功能觉得没啥难度以为调调接口就能好了,万万没想到万恶的微信小程序接口返回的录音音频格式竟然是s ...
- 微信小程序asp服务器架设,asp写的微信小程序支付demo-服务器端是asp+mdb的
这个微信小程序支付demo代码是我用asp写的,微信小程序端加上服务器端用的asp和mdb数据库,下面是代码分享: 订单说明:{{paydata.title}} 支付金额:分 支付 --------- ...
- 微信小程序+PHP 从零写一个微信小程序
微信小程序是越来越火,参与其中的开发者也越来越多,但是很多朋友都是只懂小程序前端开发,或者是只懂 PHP 开发,本 Chat 就是想让这部分人能够自己一个人把前后端串起来,做一个专属自己的微信小程序. ...
- 写一个微信小程序，加拿大移民分数计算器
如果你想写一个加拿大移民分数计算器的微信小程序,你需要遵循以下步骤: 首先,你需要了解如何使用微信小程序开发工具,包括如何创建小程序项目.如何编写代码和如何调试小程序. 然后,你需要了解加拿大移民分数 ...
最新文章
- 综述：神经网络中 Normalization 的发展历程
- SQLSERVER 分页
- hadoop集群配置与启动
- 2分钟学会ajax 入门ajax必备
- php 获取设备,PHP获取设备类型实例代码
- 单元测试: gmock
- php输出查询mysql总数_PHP查询语句，如何返回总记录数？？
- 调整和改编赛车游戏——游戏屏幕
- SQLAPI报错：API client not set
- Lua学习笔记3. 函数可变参数和运算符、转义字符串、数组
- 论文笔记_S2D.72_RGB图像和不确定性引导的稀疏噪声激光雷达深度补全
- [C++]operator难点、豆知识
- 达梦数据库查询表结构
- 〖Python〗-- Django基础
- 大家都见过哪些让你虎躯一震的代码？
- 多重背包二进制优化（wzk吃小鸡腿）
- Firefox 尝试与您指定的代理服务器连接时被拒绝
- 精伦的开发盒子USB上外挂SD卡路径
- Idea生成英文JavaDoc以及中文编码问题
- matlab——遗传算法中的选择，交叉，变异等一系列问题解析(一)
热门文章
- 一个简单的库存控制模型
- thinkphp5.1生成错误日志文件以及Evn的使用
- 为什么中国神仙比较负责任？
- Android：系统日历同步日程
- linux mint 搜狗 乱码,解决linux mint wine微信字体显示问题
- 微信朋友圈+html+字体颜色,改变微信聊天字体颜色的方法？
- ddl是什么意思网络语_DDL(数据定义语言)
- 滚球板球控制系统详解（openmv+stm32实现）
- 2020年最全各省市矢量数据下载（含城市道路、铁路、高速、省道、县道、乡道等+河流水系网+建筑轮廓+铁路网等shp矢量数据+矢量量边界+wgs84坐标
- 联想笔记本电脑开机无法修复计算机,联想笔记本开机没反应怎么办 笔记本无法开机的解决方法...