微信小程序单一页面开发，业务篇

微信小程序单一页面开发技术总结

此项目为全栈开发，前端运用微信小程序原生写法，后端运用node技术，结合egg框架实现。本文章只针对单一页面开发中的总结，设计技术栈有限。
----实现用户访问权限管理

页面组成

1. 页面文件创建

直接在app.json中输入文件路径，项目名不能与其它项目名重复，输入后按回车确定。这时候就会生成一个文件夹，下面有四个文件。分别是.js、.json、.wxml、.wxss

文件名说明：

文件名	说明
.js	接口、方法，书写逻辑
.json	配置文件、处理数据
.wxml	html、页面结构组成
.wxss	css、页面布局

2. json文件使用说明

此处仅用到个别组件，更多配置请看微信开发文档 页面配置.

属性	类型	默认值	描述	最低版本
navigationBarTitleText	string		导航栏标题文字内容
usingComponents	Object	否	页面自定义组件配置	1.6.3

<!--pages/index/index.json-->
//自定义一个标题名称
"navigationBarTitleText": "主界面",
//将需要用到的组件引进来如下 
"usingComponents": {
  "i-icon": "../../dist/icon/index",
  "i-button": "../../dist/button/index",
  "i-tag": "../../dist/tag/index",
  "i-divider": "../../dist/divider/index"
  }

usingComponents 内部组件引进后，.wxml内部便可以标签的形式进行使用。

3. 主页生成页面点击跳转图标

在主页面的.js中定义图标的name、path、icon，并在.wxml中使用。

menuList: [    //注意此数组名，下一段代码会用到
	 ...,
	  {
        icon: "../../images/yqhsjd.png", //图片名自定义，推荐阿里矢量图标
        path: "../Report/Report", //文件存在路径
        name: "测试用" //显示的名字
      }]

<view wx:for='{{menuList}}' wx:key='index' class="submenu" data-path="{{item.path}}" bindtap="clickMenu">
			<view>
				<image class="img" src="{{item.icon}}" />
			</view>
			<view>
				{{item.name}}
			</view>
		</view>

如下图为效果图，显示内容分别为 icon和 name。wx:for==v-for、 data-path跳转到指定文件、 bindtap方法点击调用。

页面开发

1. 数据获取

首先要知道自己要什么，要实现一个页面的开发，页面最终是要完美的呈现给用户。那么我们不能盲目的进行开发，要先拿到数据，因为你不知道你最终可以得到的数据是长什么样，拿到之后再对应数据去实现你想要的效果。所以第一步是拿数据。
鉴于我们所用到的技术栈，获取数据分为几步。如下：

此方法调用过程中，首先要在js文件方法中定义一个唯一类名，然后通过app调用request方法便可访问后端，并可以携带参数。再根据此方法名去到后端文件下router文件创建对应api，通过路径创建对应方法，书写逻辑、操作数据库，返回给request方法。（调用request方法需要引进app）

// 前端js文件
let app = getApp(); //引进app
Page({
	get() {
		app.request("/XXX", { 参数 }).then(res => {
    		console.log(res) //拿到数据
		}
  	}
  	// 生命周期函数--监听页面加载
  	onLoad: function (options) {
    this.get();
  },
})

// router.js文件
module.exports = (app) => {
  app.loadRoutes();
  const { controller, apiRouter } = app;
  apiRouter.get("/public/XXX", controller.aaa.bbb.XXX); //前面作为api识别，后面为路径
 }

// 后端aaa下的bbb.js文件
"use strict";
const path = require("path");
const Controller = require("egg").Controller;
class hyTrack extends Controller {
	async XXX({参数}) {
		// 书写逻辑
	}
}

2. 用户访问权限管理

此页面开发需要设置权限，非本用户不可查看到展示数据。这里我做了一个判断，通过app.globalData.skey去获取 skey用户登录唯一值，作为参数传到后端。后端拿到参数进行对比用户保存信息时存入数据库的ID，以此来匹配用户访问信息。
如图：

操作如下：

// 前端js文件
get() {
		app.request("/XXX", { skey:app.globalData.skey }).then(res => {
			let list = res.data
    		console.log(list) //拿到数据
		}
  	}

// 后端aaa下的bbb.js文件
async XXX({skey}) {
	console.log(skey)
	return { state:1,data:res } //返回数据去前端，内容自定义
}

3.效果实现

我们要实现 卡片 效果，因此我们在 .json中引入i-card，就可以使用，其它内容没什么好讲的，就是简单的渲染。如下图，已经有了 卡片效果

代码如下：

<view wx:if="{{reportList.length==0}}" style="height:100%;width:100%">
	<view class="available">暂无数据</view>
</view>
<view wx:else>
	<view wx:for="{{reportList}}" wx:key='index' style="margin-bottom:10rpx">
		<i-card title="{{item.name}}" extra="{{item.jbResult}}">
			<view slot="content">
				<view>
					违法事件：{{item.Illegal}}
				</view>
				<view>
					举报地点：{{item.Address}}
				</view>
				<view wx:if="{{item.IsHandle==1}}">
					处理结果：{{item.Results}}
				</view>
			</view>
			<view wx:if="{{item.IsHandle==1}}" slot="footer">处理时间：{{item.ResultTime}}</view>
		</i-card>
	</view>
</view>

以上就是页面实现过程，值得一提的是微信小程序和 VUE所用到的标签不同，但是用法及其相似，如果想更加深一步理解，请进一步查看文档，此处运用不多。