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

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