Skip to main content

微信小程序开发-源代码解读

全局配置

app.json

全局静态配置文件。

{
"usingComponents": {
//小程序全局使用的组件
"van-steps": "@vant/weapp/steps/index" // vant进度条组件声明
},
"pages": [
//小程序的页面信息
"pages/QA/QA", // 第一条默认为首页
"pages/form/form",
"pages/choose/choose",
"pages/success/success",
"pages/Feedback/Feedback"
],
"window": {
// 全局窗口和导航栏的样式信息
"backgroundTextStyle": "light", // 下拉刷新文字颜色
"navigationBarBackgroundColor": "#fff", // 导航栏背景颜色
"navigationBarTitleText": "北林计协", // 导航栏文字
"navigationBarTextStyle": "black" // 导航栏文字颜色
},
"tabBar": {
//底部导航设置
"list": [
{
"pagePath": "pages/QA/QA", // 第一个页面为QA,也就是问答页面
"text": "常见问题", // Tabbar下面的描述文字
"iconPath": "pages/images/QA-click.png", //设置当前导航的Icon地址
"selectedIconPath": "pages/images/QA-noclick.png" // 选中后的Icon地址
},
{
"pagePath": "pages/choose/choose",
"text": "维修申请",
"iconPath": "pages/images/form-click.png",
"selectedIconPath": "pages/images/form-noclick.png"
}
]
},
"sitemapLocation": "sitemap.json" // 微信索引文件,用于在微信内搜索小程序
}

sitemap.json

微信搜索索引。用于配置在微信中搜索小程序时展示的内容(不重要):

{
"desc": "关于本文件的更多信息,请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
"rules": [{
"action": "allow",
"page": "*"
}]
}

app.js

全局的逻辑函数。

// app.js
App({
onLaunch() {
// 展示本地存储能力
const logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)

// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
},
globalData: {
userInfo: null
}
})

在上面的代码中,决定了小程序在加载时反馈本地存储能力,已经登陆成功后获取用户的ID。

app.wxss

全局样式,全局公用的样式可以放在这里,对每个页面都生效。

/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}

页面配置

主页-QA

QA.json

指出在这一界面中用到的vant组件:

{
"usingComponents": {
"van-collapse": "@vant/weapp/collapse/index",
"van-collapse-item": "@vant/weapp/collapse-item/index",
"van-tab": "@vant/weapp/tab/index",
"van-tabs": "@vant/weapp/tabs/index",
"van-icon": "@vant/weapp/icon/index"
}
}

QA.wxml

页面的h5代码,创建元素。
1


<view class="part1">
<van-icon class="icon0" name="question-o" />
<view class="part0">常见问题</view>
<van-collapse accordion value="{{ activeName }}" bind:change="onChange" >
<van-collapse-item title="我的电脑C盘快满了,该怎么办?" name="1">
<text>···</text>
</van-collapse-item>

<van-collapse-item title="笔记本玩游戏掉帧卡顿怎么办?" name="2">
<text>···</text>
</van-collapse-item>
<van-collapse-item title="我的电脑连不上校园网了,该怎么办?" name="3">
<text>···
</text>
</van-collapse-item>
<van-collapse-item title="电脑内存占用过高" name="4">
<text>···
</text>
</van-collapse-item>
</van-collapse>
</view>

<view class="box2">

<van-icon class="icon0" name="label-o" />
<view class="part0">问题导航</view>
<view class="part2">
<van-tabs class="tab" color="rgb(130, 240, 216)" swipeable>
<van-tab color="#f2826a" title="分类1"class="tab-content">
<van-collapse value="{{ activeNames }}" bind:change="onChange2">
<van-collapse-item title="电脑经常蓝屏,该怎么解决?" name="1">
<text> ···
</text>
</van-collapse-item>
<van-collapse-item title="死机、系统自动重启" name="2">
<text>···</text>
</van-collapse-item>
</van-collapse>
</van-tab>

<van-tab title="分类2" class="tab-content">
<van-collapse value="{{ activeNames2 }}" bind:change="onChange3">
<van-collapse-item title="触控板故障" name="1">
<text> ··· </text>
</van-collapse-item>
<van-collapse-item title="电脑键盘失灵怎么办?" name="2">
<text>···
</text>
</van-collapse-item>
</van-collapse>
</van-tab>

<van-tab title="分类3" class="tab-content">
<van-collapse value="{{ activeNames3 }}" bind:change="onChange4">
<van-collapse-item title="开机速度慢怎么办?" name="1">
<text> ···
</text>
</van-collapse-item>
<van-collapse-item title="电脑很卡怎么办?" name="2">
<text>···
</text>
</van-collapse-item>
</van-collapse>
</van-tab>
</van-tabs>
</view>
</view>

在上述代码中,将页面分成两个部分,分别是上半部分的折叠面板和下半部分的标签面板+折叠面板。
参考:Vant折叠面板VantTab面板

QA.wxss

规定该页面的样式,各个组件的颜色等:


.part0{
margin:30rpx;
margin-left:38rpx;
margin-top:32rpx;
font-size:40rpx;
font-weight:400;
float:left;
}
.icon0{
width:40rpx;
height:40rpx;
float:left;
transform: scale(1.8);
margin-left: 40rpx;
margin-top: 40rpx;
}

.part1{
height:auto;
margin:15rpx;
width:auto;
clear:both;
margin-bottom: 100rpx;
background-color: rgb(130, 240, 216);
border-radius: 20rpx;
}
.van-cell{
background-color: rgb(224, 250, 244) !important;
}
.part2{
height:auto;
margin:50rpx;
clear:both;
}

.tab-content{
margin:30rpx;
}
.van-collapse-item__content{
background-color: rgb(239, 253, 250) !important;
}
.box2{
/* background-color: rgb(130, 240, 216); */
margin: 15rpx;
border-radius: 20rpx;
}
.van-tabs{
width: 100%;

}
.titlebox{
width: 100%;
display: block;
}
.tab{
padding: 0 !important;
}

QA.js

编写了本页面的逻辑:

  Page({

/**
* 页面的初始数据
*/
data: {
activeName: '0', // 初始化names
activeNames: ['0'],
activeNames2: ['0'],
activeNames3: ['0'],
},
onChange(event) {
//点击第一个便签时将折叠面板切换到这个标签的位置
this.setData({
activeName: event.detail,
});
},
onChange2(event) {
this.setData({
activeNames: event.detail,
});
},
onChange3(event) {
this.setData({
activeNames2: event.detail,
});
},
onChange4(event) {
this.setData({
activeNames3: event.detail,
});
}
})

表单提交页面

form.wxml

<van-steps steps="{{ steps }}" active="{{ active }}" />
<!-- 填写进度 -->
<van-divider contentPosition="left" fontSize="16" textColor="#1989fa">基本信息</van-divider>
<!-- 分割线 -->
<van-cell-group>
<!-- 单元格组1,基本信息 -->
<van-field
required
value="{{ username }}"
label="姓名"
/>
<!-- Field 输入框 -->
<van-field
required
value="{{ phone }}"
label="手机号"
/>
<view wx:if="{{isStudent}}">
<van-field
required
value="{{ id }}"
label="学号"
/>
<van-field
required
value="{{ class }}"
label="班级"
/>
</view>
</van-cell-group>

<van-divider contentPosition="left" fontSize="16" textColor="#1989fa">维修信息</van-divider>
<van-cell-group>
<!-- 单元格组2-维修信息 -->
<van-field
value="{{ brand }}"
label="电脑品牌"
/>
<van-field
value="{{ modelnumber }}"
label="电脑型号"
/>
<van-field
required
type = "textarea"
maxlength ="400"
show-word-limit
autosize
value="{{ description }}"
label="故障描述"
/>
</van-cell-group>

<van-divider contentPosition="left" fontSize="16" textColor="#1989fa">上传故障照片</van-divider>
<van-uploader
style="margin: 10px;"
file-list="{{ fileList }}"
bind:after-read="afterRead"
max-count="2"
/>

<view style="display:flex; flex-direction:row; min-height: 50px; padding: 10px; margin: 10px;">
<view style="flex: 4;"></view>
<van-button type="primary" size="normal" style=" flex: 2;" bind:click ="goSuccess">提交</van-button>
</view>

参考:Field输入框Cell单元格

form.js

Page({
data: {
name: '', //初始化姓名
phone: '', //初始化电话号码
brand: '', //初始化电脑品牌
modelnumber: '', //初始化电脑型号
description: '', //初始化故障描述
isStudent:false, //初始化,是否是学生,否则是老师
id: '', //初始化学号
class: '', //初始化班级
fileList: [], //初始化文件列表
steps: [
{
text: '选择身份', //进度0
desc: '',
},
{
text: '填写信息', //进度1
desc: '',
},
{
text: '申请成功', //进度2
desc: '',
},
],
active: ['1'],// 表明当前的进度条进度为1(从0开始)
},
onChange(event) {
this.setData({
radio: event.detail,
});
},
afterRead(event) {
//读取上传的图片
const { file } = event.detail;
// 当设置 mutiple 为 true 时, file 为数组格式,否则为对象格式
wx.uploadFile({
url: 'https://example.weixin.qq.com/upload', // 仅为示例,非真实的接口地址
filePath: file.url,
name: 'file',
formData: { user: 'test' },
success(res) {
// 上传完成需要更新 fileList
const { fileList = [] } = this.data;
fileList.push({ ...file, url: res.data });
this.setData({ fileList });
},
});
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {

},
goSuccess() {
wx.navigateTo({
url: '../success/success' //填写完毕后跳转到成功界面
})
},
})
tip

其他页面都很相似,不再赘述。