逆战微信小程序项目
最近小程序特别火，如果你想面试前复习一些小程序项目，并且快速做出来。我就整理了一些项目常用模块如何做的。
小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。常用的小程序及它们的开发文档链接有：
微信小程序 https://mp.weixin.qq.com/
支付宝小程序 https://opendocs.alipay.com/mini/framework
头条小程序 https://developer.toutiao.com/dev/cn/mini-app/develop/framework/basic-reference/introduction
百度小程序 https://smartprogram.baidu.com/docs/develop/tutorial/demo/
QQ小程序 https://q.qq.com/wiki/develop/miniprogram/frame/catalog.html
我就拿微信小程序为例给大家介绍，因为其他小程序的跟微信差不多的，学好了微信小程序，其他很容易懂的。
小程序的页面配置
1、全局配置
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象
{
"pages": [
"pages/home/home",
"pages/discover/discover",
"pages/cart/cart",
"pages/user/user",
"pages/index/index",
"pages/logs/logs",
"pages/detail/detail",
"pages/map/map"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#f66",
"navigationBarTitleText": "嗨购",
"navigationBarTextStyle": "white",
"enablePullDownRefresh":true,
"backgroundColor":"#efefef",
"backgroundColorTop":"#0f0",
"onReachBottomDistance":50
},
"tabBar":{
"color": "#333",
"selectedColor": "#f66",
"backgroundColor":"#efefef",
"list":[{
"pagePath":"pages/home/home",
"text":"首页",
"iconPath":"resources/home.png",
"selectedIconPath":"resources/home-active.png"
},{
"pagePath": "pages/discover/discover",
"text":"发现",
"iconPath": "resources/kind.png",
"selectedIconPath": "resources/kind-active.png"
},
{
"pagePath": "pages/cart/cart",
"text": "购物车",
"iconPath": "resources/cart.png",
"selectedIconPath": "resources/cart-active.png"
},
{
"pagePath": "pages/user/user",
"text": "我的",
"iconPath": "resources/mine.png",
"selectedIconPath": "resources/mine-active.png"
}]
},
"networkTimeout":{
"request":1000,
"uploadFile":5000,
"downloadFile":5000
},
"permission":{
"scope.userLocation":{
"desc":"你的位置信息展示"
}
},
"navigateToMiniProgramAppIdList":["此处填写你申请的微信ID"],
"sitemapLocation": "sitemap.json"
}
pages
用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻找对于位置的 .json, .js, .wxml, .wxss 四个文件进行处理
window
用于设置小程序的状态栏、导航条、标题、窗口背景色。
tabBar
如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
networkTimeout
各类网络请求的超时时间，单位均为毫秒。
permission
小程序接口权限相关设置。字段类型为 Object：
sitemapLocation
指明 sitemap.json 的位置；默认为 ‘sitemap.json’ 即在 app.json 同级目录下名字的 sitemap.json 文件
navigateToMiniProgramAppIdList
当小程序需要使用 wx.navigateToMiniProgram 接口跳转到其他小程序时，需要先在配置文件中声明需要跳转的小程序 appId 列表，最多允许填写 10 个。
2、普通页面配置
每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象。
下面我就以一个首页为例
{
"usingComponents": {
"prolist":"/components/prolist/prolist"
},
"navigationBarBackgroundColor": "#f66",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "首页",
"backgroundColor": "#eeeeeee",
"backgroundColorTop":"#efefef",
"backgroundTextStyle": "light"
}
小程序的框架接口
注册小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。
示例中app.js代码如下
//app.js
App({
onLaunch: function () {
// 获取设备的信息
this.getDeviceInfoFn()
// 展示本地存储能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
},
getDeviceInfoFn() {
wx.getSystemInfo({
success: (res) => {
console.log(res)
// 修改全局数据
this.globalData.deviceinfo = res
}
})
},
onShow(options) {
// 小程序启动，或从后台进入前台显示时触发
},
onHide() {
// 小程序从前台进入后台时触发.
},
onError(msg) {
// 小程序发生脚本错误或 API 调用报错时触发
console.log(msg)
},
onPageNotFound(res) {
// 小程序要打开的页面不存在时触发;如果是 tabbar 页面，请使用 wx.switchTab - 404
},
globalData: {
userInfo: null
}
})
注册小程序中的一个页面。接受一个Object类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等
示例中home.js代码如下
// pages/home/home.js
import { request, toast } from './../../utils/index.js'
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// console.log('onLoad')
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
// console.log('onReady')
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
// console.log('onShow')
// console.log(getCurrentPages())
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
// console.log('onHide')
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
console.log('onUnload')
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
// console.log('下拉了')
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
// console.log('到底了')
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
// console.log('准备分享')
},
// 监听滚动条坐标
onPageScroll:function(e){
// console.log(options)
},
/**
* 自定义函数
*/
myfun () {
}
})
小程序的首页开发
在此处请求轮播图的数据为例
封装数据库的请求 utils/index.js
const baseUrl = ' https://www.xxxx.xx' //你的接口地址
/**
* 封装数据请求的方法
* https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html
* axios
*
* 组件其实就是含有了 视图的 模块
*/
export function request(options) {
// 解构赋值 --- 获取用户传递的参数信息
const { url, data, method } = options;
// 加载动画 https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showLoading.html
wx.showLoading({
title: '加载中',
})
// 核心点 异步 A方法请求，B方法调用
// 回调函数、promise、generator + yield、async+await
return new Promise((resolve, reject) => {
wx.request({
url: baseUrl + url,
data: data || {},
method: method || 'GET',
header: {
'content-type': "application/json; charset=utf-8" // 默认值
},
success: (res) => {
// 异步操作成功调用resolve
resolve(res)
},
fail: (err) => {
// 异步操作失败调用reject
reject(err)
},
complete: () => {
// 成功也好，失败也罢，都是已完成
wx.hideLoading()
}
})
})
}
/**
* 封装toast显示
* https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html
*/
export function toast(options) {
const { title, icon, duration } = options
wx.showToast({
title,
icon: icon || 'none', // success loading
duration: duration || 2000
})
}
首页轮播图数据请求
pages/home/home.js
// pages/home/home.js
import { request, toast } from './../../utils/index.js'
/**
* 页面的初始数据
*/
data: {
bannerlist: []
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// console.log('onLoad')
// 请求轮播图数据
this.getBannerData()
},
// 请求轮播图数据
getBannerData() {
// 请求轮播图数据
request({
url: '/pro/banner'
}).then(res => {
// console.log(res)
// vue this.bannerlist = res.data.data
// react this.setState({bannerlist: res.data.data})
// 小程序修改状态的方式 就是 this.setData
this.setData({
bannerlist: res.data.data
})
})
}
pages/home/home.wxml
小程序的列表页开发
1.自定义一个列表组件
创建自定义组件，接受一个 Object 类型的参数
比如在首页里需要一个产品列表的组件，可以自定义该组件 image
小技巧 点击 “+”选择目录，输入components
右键点击components目录，选择目录， 输入prolist
右键点击prolist目录，选择 新建Component ，输入prolist 即可
如何使用该组件呢？
在首页的pages/home/home.json文件中注册组件 image
在首页的pages/home/home.wxml中使用该组件，就像正常的标签一样使用 image
路由跳转
- 声明式导航跳转
- 使⽤⼩程序 组件-导航-navigator
- 编程式导航
- 使⽤⼩程序提供的 api—导航 实现编程式路由的跳转
{{item.proname}}
{{item.sales}} / {{item.stock}}
￥{{item.price}}
逻辑：bindtap定义事件,采用data-params形式传递事件参数，并在事件中根据 event/a ( 随便写 )获取该参数
// components/prolist/prolist.js
Component({
/**
* 组件的属性列表
*/
properties: {
prolist: Array
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
toDetail (event) {
console.log('去详情', event)
// const { proid } = event.currentTarget.dataset
const { currentTarget: { dataset: { proid } } } = event
// 编程式导航
// 如果跳转的是tab页面，可以使用 switchTab 或者 reLaunch
// 如果跳转的是非tab页面，可以使用 redirectTo 或者 navigateTo 或者 reLaunch
wx.navigateTo({
url: `/pages/detail/detail?proid=${proid}`
})
// wx.redirectTo({
// url: `/pages/detail/detail?proid=${proid}`
// })
// wx.reLaunch({
// url: `/pages/detail/detail?proid=${proid}`
// })
}
}
})