参考资料：
微信小程序组件参考：（用于了解微信原生组件）
https://developers.weixin.qq.com/miniprogram/dev/component/
image.png
一.初始化项目(分为首页跟我的两个模块)
1.路由配置
image.png
2.相应文件夹配置
文件创建.png
3.tabbar配置
"tabBar": {
"color": "#9399A5",
"selectedColor": "#003246",
"borderStyle": "black", // 处理在真机上横线消失的问题
"list": [
{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "pages/images/home.png",
"selectedIconPath": "pages/images/homeselected.png"
},
{
"pagePath": "pages/mine/mine",
"text": "我的",
"iconPath": "pages/images/my.png",
"selectedIconPath": "pages/images/myselected.png"
}
]
}
效果展示：
image.png
二.组件对应和引入vant
<view>可以当作<div>来使用
布局使用flex布局
页面常用的toast和loading提示
wx.showToast({
title: res.data.msg,
icon: 'none',
duration: 2000
});
wx.showToast({
title: '发送成功',
icon: 'success',
duration: 2000
});
wx.showLoading({
title: '加载中...',
});
部分常用组件可以引入vant参考文档：
https://vant.pro/vant-weapp/#/quickstart
### 步骤一 通过 npm 安装
# 通过 npm 安装
npm i @vant/weapp -S --production
### 步骤二 修改 app.json
将 app.json 中的 `"style": "v2"` 去除，小程序的[新版基础组件](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#style)强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。
### 步骤三 构建 npm 包
打开微信开发者工具，点击 **工具 -> 构建 npm**，并勾选 **使用 npm 模块** 选项，构建完成后，即可引入组件。
image.png
使用
"usingComponents": {
"van-field": "@vant/weapp/field/index",
"van-icon": "@vant/weapp/icon/index",
"van-sticky": "@vant/weapp/sticky/index",
"van-datetime-picker": "@vant/weapp/datetime-picker/index",
"van-action-sheet": "@vant/weapp/action-sheet/index"
},
tip关于关于小程序渲染模式的选择：
https://developer.aliyun.com/article/1497344
image.png
webview和skyline渲染模式选择
webview：老一点，稳定，支持老版本和新版本
skyline： 新一点，不太稳定，不支持老版本
我们调成webview模式，更稳定一些
项目配置—>app.json–>删除3个配置
把这几个配置删了
image.png
删除后警告会消失。
三.了解页面生命周期
使用 Page 构造器注册页面
简单的页面可以使用 Page() 进行构造。
代码示例：
//index.js
Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// 页面创建时执行
},
onShow: function() {
// 页面出现在前台时执行
},
onReady: function() {
// 页面首次渲染完毕时执行
},
onHide: function() {
// 页面从前台变为后台时执行
},
onUnload: function() {
// 页面销毁时执行
},
onPullDownRefresh: function() {
// 触发下拉刷新时执行
},
onReachBottom: function() {
// 页面触底时执行
},
onShareAppMessage: function () {
// 页面被用户分享时执行
},
onPageScroll: function() {
// 页面滚动时执行
},
onResize: function() {
// 页面尺寸变化时执行
},
onTabItemTap(item) {
// tab 点击时执行
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
},
// 事件响应函数
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
}, function() {
// this is setData callback
})
},
// 自由数据
customData: {
hi: 'MINA'
}
})
四.网络请求
页面简单的情况下直接使用了wx.request
getuserInfo () {
wx.showLoading({
title: '加载中...',
});
let that = this
wx.request({
url: `${env.baseURL}xxxx/xxx/xxx/company/info`, // 请求的接口地址（液位图）
method: 'GET', // 请求方法，可选值有：GET、POST、PUT、DELETE
header: {
'content-type': 'application/json', // 设置请求的内容类型
'token': wx.getStorageSync('token')
},
// const keysa = createKey();
data: {
},
success: function (res) {
if (res.data.code == '0') {
that.setData({
accountInfo: res.data.data,
});
} else {
wx.showToast({
title: res.data.msg,
icon: 'none',
duration: 2000
});
}
wx.hideLoading();
},
fail: function (res) {
// 隐藏
wx.hideLoading();
that.setData({
accountInfo: {},
});
console.log(res) // 请求失败的回调函数
}
})
},
配置请求需要的测试开发和生产环境变量
以下链接都需要在服务器配置，如图所示
image.png
新建env.js文件
// 就是配置当前小程序项目的环境变量
// 获取当前小程序的账号信息
const { miniProgram } = wx.getAccountInfoSync()
// 获取小程序的版本
const { envVersion } = miniProgram;
let env = {
baseURL: "https://xxx.cn/",
cangURL: "https://ccc.cn"
}
switch (envVersion) {
case 'develop':
// 开发版
env.baseURL = "https://xxxtest.cn/",
env.cangURL= "https://ccctest.cn"
break
case 'trial':
// 体验版
env.baseURL = "https://xxx.cn/",
env.cangURL= "https://ccc.cn"
break
case 'release':
// 正式版
env.baseURL = "https://xxx.cn/",
env.cangURL= "https://ccc.cn"
break
default:
break
}
export { env }
需要的文件里引入环境变量文件
import { env } from '../../env';
然后可以访问到env.baseURL
五.路由跳转(业务简单只用到这两种)
可参考官方路由
https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html
1.非tab页面跳转
wx.navigateTo({
url: '/xx/xx/xx
})
2.应用于跳回tab页
wx.switchTab({
url: '/pages/home/home',
})
