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

宽河高山 發表於 2019-8-31 16:16:00

<div>导航：C#开发微信小程序系列</div>
 
关于小程序项目结构，框架介绍，组件说明等，请查看微信小程序官方文档，关于以下贴出来的代码部分我只是截取了一些片段，方便说明问题，如果需要查看完整源代码，可以在我的项目库中下载：
https://github.com/dwBurning/WeChatMiniProgram.git
 
继上一篇写微信小程序的文章已经有一年多了，当时也是浅尝辄止的学习了一下，源代码也没有公布，因为写的不规范，容易误导大家，刚好最近有同学在评论里问我要源代码，于是，又重新整理完善了一番，在整理的过程中，发现了很多的小问题，所以再写一篇，供大家参考。
 第一：目录结构，从这个截图可以看到，这个小程序有三个菜单（tabBar），而最初的版本，我所有的page都在pages文件夹下，这样整个程序运行起来也没什么问题，只是很不规范，看起来不舒服，于是，我调整了目录结构。每个菜单下的page放在对应的文件夹下，分别为home，carts，mine
<img src="https://img2018.cnblogs.com/blog/635258/201908/635258-20190831153732340-297584429.png">
 
 
 第二：请求地址，最初的版本，每一次发起http请求，都是在单独的页面写了url路径，当然可能当时是复制的，所以一旦要修改这个url地址的时候，就要到各个页面去修改，这个是大忌，所以此次更改，我将url地址设置成了全局变量，修改的时候改这一个地方就可以了。
在App.js中增加全局变量globalData，具体参数如下：
<div class="cnblogs_code">
<pre>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: ''
}
})</pre>
</div>
具体使用：
<div class="cnblogs_code">
<pre> const app = getApp();

/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
var _this = this;
util.checkSession();
wx.request({
 url: app.globalData.urlCategory,
 success: function(res) {
 _this.setData({
 navLeftItems: res.data.Context,
 navRightItems: res.data.Context
 })
 }
})

},</pre>
</div>
第三：对通用样式抽取独立的CSS文件，pages文件夹下的common文件夹，放置通用样式文件，比如index.wxss，在其他页面的wxss文件直接引用，注意关键字import
<div class="cnblogs_code">
<pre>@import '../common/index.wxss';</pre>
</div>
第四：抽取公共方法，在util文件夹下有一个util.js的文件，我在里边新增加了一个方法checkSession，用来检查登录是否过期，添加方法后，在其他页面还不可以直接调用，必须要在module.exports暴露这个方法，才可以在其他地方调用。
<div class="cnblogs_code">
<pre>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 .map(formatNumber).join('/') + ' ' + .map(formatNumber).join(':')
}

const formatNumber = n => {
n = n.toString()
return n ? 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)
 }
 }
 })
}
})
}</pre>
</div>
具体使用：
<div class="cnblogs_code">
<pre>var util = require('../../utils/util.js');

/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
var _this = this;
util.checkSession();
wx.request({
 url: app.globalData.urlCategory,
 success: function(res) {
 _this.setData({
 navLeftItems: res.data.Context,
 navRightItems: res.data.Context
 })
 }
})
},</pre>
</div>
以上是对小程序前端整理过程中发现的问题，当然还有对后端Api整理过程中发现的问题，放到下一篇再做介绍。

</div>
<div id="MySignature" role="contentinfo">
牛人之所以是牛人，是因为你现在在踩的坑，他曾经都已经踩过了。 
来源：https://www.cnblogs.com/dwBurning/p/wechatminiprogramwithwebapi2.html

頁: [1]

琼殿技术论坛's Archiver

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