一、iView-admin 后台管理系统的搭建

搭建平台的官方地址：https://github.com/iview/iview-admin

1.富文本编辑器

1> 发现问题：鼠标一旦移开编辑栏，编辑栏的下拉框就消失。截图如下：

问题所在：层级问题。修改z-index
解决办法：

.w-e-menu{z-index: 2!important;}.w-e-text-container{z-index: 1!important;}

2> table里显示富文本内容

{ title: '描述', key: 'desc', render: (h, params) => { return h('div', { domProps: { innerHTML: params.row.desc }, style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', textAlign: 'justify', textJustify: 'inter-ideograph' } }) } },

2.权限管理–侧边栏展示标签&按钮权限

需求：不同身份的人看到的导航栏标签不同
解決办法：
导航栏如图：
设置按钮如下：期待…

3.接入微擎，单页面应用框架刷新404问题

发现问题：因为要接入微擎平台，从微擎平台跳到这个后台管理系统，而微擎的域名很长一大段（例如：https://www.ceshi.cn/web/index.php?c=site&a=entry&do=index&m=xxx&version_id=xx/login）
mode:hostory —— https://www.ceshi.cn/login（问题没解决前，网址是这样的）
bug —— 1. 从微擎到后台系统，偶尔404 2. 刷新本页面404
解决办法：原先的history，模式改为 hash，网址就变成了（https://www.ceshi.cn/web/index.php?c=site&a=entry&do=index&m=xxx&version_id=xx/#login）页面刷新也ok
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190418171552716.png

4.添加微擎的版权消息

在index.html页面添加下面这段

<div class="copyright">{if empty($_W['setting']['copyright']['footerleft'])}Powered by <a href="http://www.we7.cc"><b>微擎</b></a> v{IMS_VERSION} © 2014-2015 <a href="http://www.we7.cc">www.we7.cc</a>{else}{$_W['setting']['copyright']['footerleft']}{/if}</div>{if !empty($_W['setting']['copyright']['icp'])}<div>备案号：<a href="http://www.miitbeian.gov.cn" target="_blank">{$_W['setting']['copyright']['icp']}</a></div>{/if}

本地显示如下:
线上如下：

各种报错综合

1.访问出错
具体表现：在访问接口中，多了一个/web/
解决方法：定义的接口前面多加一个 /
如：const front = ‘/app/index.php?i=’ + window.allData.uniacid + ‘&m=xxx_xxx&c=entry&do=index’

各类组件问题集锦

1.Select 数据被替换

问题描述： 原来数据里的某字段为“15”，打开模态框以后，数据为undefined
解决办法：

<FormItem label="中心：" prop="netid"> <Select :value="modalData.netid" @on-change="changeNet"> <Option v-for="item in netList" :value="item.id" :key="item.id">{{ item.name }}</Option> </Select></FormItem>//方法加载select的时候，它会替换modalData里的数据changeNet (val) { if (val) { this.modalData.netid = val }},

二、小程序 + 微擎

1.接入微擎，登录&获取用户信息

引入

index.wxml

<view class="container"><buttonopen-type="getUserInfo"bindgetuserinfo="GetUserInfoBtn"> 授权登录</button></view>

index.js

GetUserInfoBtn(e) {//获取用户信息按钮事件（包括授权弹框）if (e.detail.errMsg == "getUserInfo:ok") {//允许授权,开始登录跳转this.Login();}},Login() {//授权登录var that = this;app.util.getUserInfo(function (info) {//微擎接口（获取用户数据）var data = {openid: info.openid,name: info.wxInfo.nickName,avatar: info.wxInfo.avatarUrl}app.POST("user", data, function (res) {//微擎自定登录接口（获取用户信息）if (res.data.errno === 0) {//获取接口返回的数据，并跳转页面}else {wx.showToast({title: '登陆失败',icon: 'warn',duration: 2000})}});});},

2.富文本解析 – wxparse

引入插件 wxparse

about.wxml

<view class="container"><rich-text nodes="{{article}}"></rich-text></view>

about.js

var WxParse = require('../../../utils/wxParse/wxParse.js')Page({/** * 页面的初始数据 */data: {article: ''},/** * 生命周期函数--监听页面加载 */onLoad: function (options) {this.getData()},//获取关于我们的内容getData(){const _this = thisapp.POST("getdata", {}, function (res) {if(res.data.errno === 0){const con = res.data.data.about_this.setData({article: con})}else{wx.showToast({title: '网络错误',icon: 'warn',duration: 2000})}})},/** * 生命周期函数--监听页面显示 */onShow: function () {var that = thisif(this.data.article != ''){WxParse.wxParse('article', 'html', article, that, 5);}}})

about.wxss

@import '../../../utils/wxParse/wxParse.wxss';

3.返回上一页，页面刷新

/** * 生命周期函数--监听页面加载 */onLoad: function (options) {//刷新上一页var pages = getCurrentPages(); // 获取当前页面的页桢打印出来是 [V, V]if (pages.length > 1) {//上一个页面实例对象var prePage = pages[pages.length - 2];//关键在这里,这里面是触发上个界面prePage.onLoad()// 具体的要根据自己的来查看所要传的参数，或者changeData不传形参，直接调用}},

4.倒计时

Page({/** * 页面的初始数据 */data: {id:1,time: '',//倒计时timer: '',days: '',hours: '',minutes: '',seconds: ''},/** * 生命周期函数--监听页面显示 */onShow: function () {if(this.data.id != ''){this.getData()}}, //获取数据详情getData(){const _this = thisapp.POST('detail',{id:_this.data.id},function(res){_this.setData({time: res.data.data.time})_this.countDown()})},// 倒计时countDown(){var that = this;let date = that.data.timeif(date < 0){that.setData({hours: '00',minutes: '00',seconds: '00',time: date})}else{that.setData({timer: setInterval(() => {date--;var time = datethat.setData({days: parseInt(time / (60 * 60 * 24)) > 9 ? parseInt(time / ( 60 * 60 * 24)) : '0' + parseInt(time / (60 * 60 * 24)),hours: parseInt((time % ( 60 * 60 * 24)) / (60 * 60)) > 9 ? parseInt((time % ( 60 * 60 * 24)) / (60 * 60)) : '0' + parseInt((time % (60 * 60 * 24)) / (60 * 60)),minutes: parseInt((time % (60 * 60)) / (60)) > 9 ? parseInt((time % (60 * 60)) / (60)) : '0' + parseInt((time % (60 * 60)) / (60)),seconds: parseInt(time % (60))> 9 ? parseInt(time % (60)): '0' + parseInt(time % (60)),time: date})if (date == 0) {clearInterval(that.data.timer)}}, 1000)})}}})

5.下拉，上滑

<view class="container"><viewwx:if="{{isUpper}}" class="lower-con">数据已更新</view> <!-- 问题展示开始 --><block wx:for="{{lists}}" wx:key="idx"> </block><!-- 问题展示结束 --><view wx:if="{{isLower}}" class="lower-con">没有多余的消息了</view></view>

Page({data: {lists:[],current: 1,isUpper: false,isLower: false},/** * 生命周期函数--监听页面加载 */onLoad: function (options) {this.getData()},//获取数据getData(){const data = {}const _this = thisapp.POST('lists', data, function (res) {if (res.data.errno === 0) {if (_this.data.current > 1 && res.data.data.data.length === 0) {_this.setData({isLower: true})} else {_this.setData({lists: res.data.data.data})}} else {wx.showToast({title: '网络错误',icon: 'warn',duration: 2000})}})}, /** * 页面相关事件处理函数--监听用户下拉动作 */onPullDownRefresh: function () {const _this = thisif (_this.data.current == 1){var timeIn = setTimeout(function () {_this.setData({isUpper: true})}, 3000)var timeOut = setTimeout(function () {_this.setData({isUpper: false})}, 6000)}else{_this.setData({current: _this.data.current - 1})this.getData()}},/** * 页面上拉触底事件的处理函数 */onReachBottom: function () {this.setData({current: this.data.current + 1})this.getData()const _this = thisvar timeOut = setTimeout(function () {_this.setData({isLower: false})}, 6000)}})