C#开发微信小程序（二）

迈不过友情╰ 2023-06-03 15:56 15阅读 0赞

导航： [C\#开发微信小程序系列][C]

关于小程序项目结构，框架介绍，组件说明等，请查看[微信小程序官方文档][Link 1]，关于以下贴出来的代码部分我只是截取了一些片段，方便说明问题，如果需要查看完整源代码，可以在我的项目库中下载：

[https://dev.tencent.com/u/dwBurning/p/ReallyWantToApi/git][https_dev.tencent.com_u_dwBurning_p_ReallyWantToApi_git]

[https://git.dev.tencent.com/dwBurning/LazyOrders.git][https_git.dev.tencent.com_dwBurning_LazyOrders.git]

继[上一篇][Link 2]写微信小程序的文章已经有一年多了，当时也是浅尝辄止的学习了一下，源代码也没有公布，因为写的不规范，容易误导大家，刚好最近有同学在评论里问我要源代码，于是，又重新整理完善了一番，在整理的过程中，发现了很多的小问题，所以再写一篇，供大家参考。

第一：目录结构，从这个截图可以看到，这个小程序有三个菜单（tabBar），而最初的版本，我所有的page都在pages文件夹下，这样整个程序运行起来也没什么问题，只是很不规范，看起来不舒服，于是，我调整了目录结构。每个菜单下的page放在对应的文件夹下，分别为home，carts，mine

![635258-20190831153732340-297584429.png][]

第二：请求地址，最初的版本，每一次发起http请求，都是在单独的页面写了url路径，当然可能当时是复制的，所以一旦要修改这个url地址的时候，就要到各个页面去修改，这个是大忌，所以此次更改，我将url地址设置成了全局变量，修改的时候改这一个地方就可以了。

在App.js中增加全局变量globalData，具体参数如下：

App({
      onLaunch: function() {
    
      },
      globalData: {
        url: 'http://localhost:8089/api/LazyOrders',
        urlCarts: 'http://localhost:8089/api/Carts',
        urlCategory: 'http://localhost:8089/api/Category',
        urlMenu: 'http://localhost:8089/api/Menu',
        carts: [],
        orders: [],
        sessionKey: ''
      }
    })

具体使用：

第三：对通用样式抽取独立的CSS文件，pages文件夹下的common文件夹，放置通用样式文件，比如index.wxss，在其他页面的wxss文件直接引用，注意关键字import

@import '../common/index.wxss';

第四：抽取公共方法，在util文件夹下有一个util.js的文件，我在里边新增加了一个方法checkSession，用来检查登录是否过期，添加方法后，在其他页面还不可以直接调用，必须要在module.exports暴露这个方法，才可以在其他地方调用。

const app = getApp()
    
    const formatTime = date => {
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      const hour = date.getHours()
      const minute = date.getMinutes()
      const second = date.getSeconds()
    
      return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
    }
    
    const formatNumber = n => {
      n = n.toString()
      return n[1] ? n : '0' + n
    }
    
    module.exports = {
      formatTime: formatTime,
      checkSession: checkSession
    }
    
    function checkSession() {
      wx.checkSession({
        success() {
          //session_key 未过期，并且在本生命周期一直有效
          console.log('session_key 未过期！')
        },
        fail() {
          // session_key 已经失效，需要重新执行登录流程
          wx.login({
            success: function(res) {
              if (res.code) {
                //发起网络请求
                wx.request({
                  url: app.globalData.url,
                  data: {
                    code: res.code
                  },
                  method: 'POST',
                  success: function(res) {
                    console.log(res.data);
                    app.globalData.sessionKey = res.data;
                    wx.setStorage({
                      key: 'sessionKey',
                      data: res.data,
                    })
                  }
                })
              } else {
                console.log('登录失败！' + res.errMsg)
              }
            }
          })
        }
      })
    }

具体使用：

以上是对小程序前端整理过程中发现的问题，当然还有对后端Api整理过程中发现的问题，放到下一篇再做介绍。

转载于:https://www.cnblogs.com/dwBurning/p/wechatminiprogramwithwebapi2.html

[C]: https://www.cnblogs.com/dwBurning/category/1538115.html
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/
[https_dev.tencent.com_u_dwBurning_p_ReallyWantToApi_git]: https://dev.tencent.com/u/dwBurning/p/ReallyWantToApi/git
[https_git.dev.tencent.com_dwBurning_LazyOrders.git]: https://git.dev.tencent.com/dwBurning/LazyOrders.git
[Link 2]: https://www.cnblogs.com/dwBurning/p/wechatminiprogramwithwebapi.html
[635258-20190831153732340-297584429.png]: /images/20230601/400d279c5ce24f34a8da586b0d286c18.png