权限管理系统主要的功能包括有：用户管理、组织机构管理、功能管理、角色管理和权限分配管理、菜单管理、系统类型管理、登录日志管理、操作日志管理、系统黑白名单管理等功能模块。对于每新增一个系统，我们只需要在权限管理系统中增加一个系统类型定义，以及相关的功能、菜单数据即可，非常方便管理。
权限管理系统，作为一个独立的系统模块，但又可以整合到所有的框架产品和项目中，实现快速的权限管理和控制。 权限的分配和管理，基本上是每个业务系统需要考虑的东西，而这些常用的东西，在整个开发框架中，把它作为一个独立的模块，既方便维护管理，也留有接口很容易进行集成，这样能够在项目中反复进行使用。
本篇随笔主要介绍权限管理系统常规的功能点，实现功能权限控制、数据权限控制、字段权限控制等功能，以及权限管理模块对应的框架接口实现方式等内容，视频主要针对性的介绍权限系统的特点，让我们了解整个权限系统的具体能够实现那些功能，具有哪些特性。
完整视频内容如下所示，欢迎大家观看并提出宝贵意见。
在我们做很多软件的时候，一般都会前端后端分开，对于我们一般的开发人员来说，侧重一个方向居多，如编码的就较少设计UI的设计开发，特别在目前一些APP、Web方面，界面的设计方面更加是比较精细化，也越来越需要一些专业化的人员去专门处理。不过话说回来，很多时候，我们小项目也需要自己能够举得起大刀，用得了菜刀，有时候形势所逼也需要我们擅长后端开发的人员兼顾UI的开发，一般不太复杂的界面也不用去专门找一个UI设计的人员了。本篇专门针对于小程序的界面设计方面进行一些探索性的研究讨论，介绍小程序界面设计的一些思路和方向。
在网上搜索一下，关于小程序零编码的平台如雨后春笋一般，令人目不暇接，各种设计平台的网站令人眼花缭乱，随着这几年H5页面设计的兴起，很多这样的设计平台，换一个马甲就继续囊括小程序的在线设计了，感觉上是重复了互联网早期网页设计的那种风潮，小程序零代码？那种是一种比较简单的静态小程序，也可能是具有一些表单填写功能的小程序，不过这种需求随着小程序的热度高升而带动了很多这些商机，毕竟一般商家没有一个看着顺眼的小程序，感觉就低人一等般，因此这样类似静态页面般的小程序还是有很大的市场。
而基于这些快速开发的设计平台，只需要缴纳年费，就可以套用模板，快速设计出比较美观的界面了，速度第一啊，一般设计人员搞一套过得去的界面，还需要了解客户需求，还需要设计下，至少一个一天半天，人家直接出效果部署，前后几分钟就搞定，因此有很大的市场。
这些开发平台一般不给导出源码（如代表的凡科轻站 http://www.fkw.com/），即使能够使用其他途径下载到小程序的源码，也是高度被高度封装混淆的，很难搞的明白，当然部分样式还是可以参考下的，这类设计平台的特点是付费模板比较多，而且也比较好看。
也有一些能够给导出源码，源码要求符合小程序的标准格式，较好的阅读的（这个代表有意派Coolsite360 http://www.coolsite360.com/wxapp/），基于快速设计小程序界面，基于一些组件模板的开发，不过缺点是组件模板太少，这个应该是基于开发人员的视角来做的，如果能够坚持可以导出文件，且组件内容比较多的话，应该很有吸引力。
另外一个也值得提一下的是墨刀，这个也是基于设计师的视角来设计小程序界面的，界面元素比较丰富，略显得臃肿一些。这个是一个客户端的软件，安装后可以进行界面的设计，另外可以导出网页文件，但非小程序格式内容，这点做的没有前面说的意派Coolsite360好。
基于这些开发，应该是在素材或者模板比较丰富的时候，快速套用一些设计风格比较方便，可以很方便做出比较专业的效果，不过也缺点是受制于人，还有就是要交纳不少的费用，这对于一般小项目或者偶尔做的小程序项目的团队来说，是一个不少的费用。
一般现在设计APP、Web网站、小程序等，都可能会用到强大的设计工具Sketch，这个工具在设计领域用的越来越广泛，而且功能确实也够好，不过和其他工具一样，需要花点时间来学习下如何使用，目前微信官方很多资源都同时放出Sketch的设计原稿，可以在网站上下载到的。
Sketch 是一款适用于所有设计师的矢量绘图应用。矢量绘图也是目前进行网页，图标以及界面设计的最好方式。
Sketch 是为图标设计和界面设计而生的，它是一个有着出色 UI 的一站式应用。
Sketch是一个功能强大的、易用的伟大产品，是应用在Mac上的一款设计软件，在UI设计领域有着很好的声誉，只要搜一下这个关键字，很多教程和相关资源都会出现，学习起来也不算太难。
它的界面分为几个区域，如下所示
基于Sketch的设计，我们也可以用循序渐进的方式来组合我们的设计图，也就是原子设计理念来指导模块化处理。
基于Sketch的开发，需要积累一定的时间，不过好处就是不用受制于一些貌似很强大的界面设计平台，那些早期使用、或者快速交付的时候使用倒是可以，长久的话，还是需要掌握相关的设计知识，利用专业工具快速开发自己的界面。
厚积薄发，慢慢的积累更多一些Sketch的素材以及设计资源，多动手解决问题才是根本。
在小程序的界面设计完成后，我们就可以结合我们的后端API，在客户端封装相关的JS的处理，从而实现一个前端后端完整的解决方案。
我们在采集特定数据的时候，往往需要耗费较长的时间，有时候因为一些事情，不可能长久的在电脑前等待结果，那么需要程序在一段时间后自动给我们发送邮件等通知，以及执行退出程序或者关机等处理善后工作，以节省资源或者电源，那么需要实现这个过程是如何的呢。本篇随笔基于这个采集程序的基础上增加这些功能的实现，介绍其中的一些处理技巧。
如果我们需要实现发送邮件、或者发送短信等通知途径，那么我们就需要把这些处理过程涉及到的参数提前录入到系统里面，是在不行硬编码也行，不过为了可扩展性，我倾向于使用配置界面进行参数的配置。
在关于参数配置的处理，我在博客《
Winform开发框架之参数配置管理功能实现-基于SettingsProvider.net的构建
》以及《
Winform界面中实现菜单列表的动态个性化配置管理
》都做了比较详细的介绍，基于SettingsProvider.net的封装处理，能够实现我们很方便的配置功能，可以配置在XML文件中，也可以保存在数据库中，根据需要处理。
那么我这里为了采集发送数据的需要，也需要配置一个邮件的信息，如下界面所示。
这个里面放置额外的两个功能按钮，一个是邮箱设置参考，一个是发送测试邮件，前者用来辅助填入一些参数，后者是验证用户账号是否收到测试邮件。
发送测试邮件成功后，我们验证下是否收到，以便核对下提供的参数是否正确。
完成上面的步骤后，我们基本上完成了一半的工作量了，剩下的就是在合适的时间，让系统发送通知给我们以及善后处理即可。
那么我们如果定时的话，需要指定一个时间范围，使用DevExpress的TimeSpanEdit控件就合适不过了，我们只需要确定小时：分钟：秒的数据后，就可以根据这个时间范围确定我们执行任务的最终时间了。
这个弹出的小窗体，我们只用来获取用户输入的时间范围即可，没有什么具体的逻辑。
输入关机时间后，那么我们就可以根据关机时间，弹出一个倒计时的窗体，覆盖在主程序的界面上。
最终我们到达时间的触发点后，实现发送邮件通知以及退出程序或者关机的处理。
以上是整个处理的过程，那么实现的处理代码是如何的呢，我们来分析下具体的代码过程。
private bool isShutdown = false;privateTimerHelper timerHelper;private void btnSendAndShutdown_Click(objectsender, EventArgs e)
{
btnSendAndShutdown.Enabled= false;try{if (!isShutdown)
{//获取关机的时间 FrmShutdownTime frmTime = newFrmShutdownTime();if (frmTime.ShowDialog() !=System.Windows.Forms.DialogResult.OK)return;//转换为最终的时间 TimeSpan timeSpan =frmTime.timeShutdown.TimeSpan;this.endTime =DateTime.Now.Add(timeSpan);//定时器辅助类处理定时工作 timerHelper = new TimerHelper(1000, true);
timerHelper.Execute+= () =>{//每隔一秒对事件进行处理判断 if (ShutdownEvent != null)
{
ShutdownEvent(sender, e);
}
};//显示关机面板 groupShutdown.BringToFront();
groupShutdown.Visible= true;
}else{//关闭面板 CloseShutDownGroup();
}
isShutdown= !isShutdown;this.btnSendAndShutdown.Text = isShutdown ? "取消关机处理" : "定时发送邮件后关机";
}finally{
btnSendAndShutdown.Enabled= true;
}
}
上面主要的处理逻辑，放在了定时器的处理事件上
ShutdownEvent(sender, e);
这个触发的事件，是我们在主窗体定义的一个事件，目的就是用来实现倒计时及发送通知用的。
private event EventHandler ShutdownEvent;
然后我们在窗体里面初始化这个事件处理即可，初始化代码如下所示。
//关闭或者退出程序的事件 this.ShutdownEvent += (s, e)=>{#region 定时处理操作 this.Invoke(new MethodInvoker(delegate()
{//判断当前的剩余时间是否进入通知流程 var ts =endTime.Subtract(DateTime.Now);if (ts.TotalSeconds > 1)
{//更新倒计时 timeLeft.TimeSpan = newTimeSpan(ts.Days, ts.Hours, ts.Minutes, ts.Seconds);
}else{//关闭面板并退出定时器 CloseShutDownGroup();//执行发送邮件操作 SendMail();//关闭主机或者退出程序 if(chkShutdown.Checked)
{
Process.Start("shutdown.exe", "-s");//关机 }else if(chkExitApp.Checked)
{
Application.ExitThread();
}
}
}));#endregion
最终的逻辑就是发送邮件和退出程序或者关机的处理
//执行发送邮件操作 SendMail();//关闭主机或者退出程序 if(chkShutdown.Checked)
{
Process.Start("shutdown.exe", "-s");//关机 }else if(chkExitApp.Checked)
{
Application.ExitThread();
}
关机的操作，我们用来执行命令行的方式实现关机的处理，非常方便。
关于这个Shutdown命令的处理，我下面列出它的一些功能说明。
shutdown命令的参数：
shutdown.exe-s：关机
shutdown.exe-r：关机并重启
shutdown.exe-l：注销当前用户
shutdown.exe-s -t 时间：设置关机倒计时
shutdown.exe-h：休眠
shutdown.exe-t 时间：设置关机倒计时。默认值是 30秒。
shutdown.exe-a：取消关机
shutdown.exe-f：强行关闭应用程序而没有警告
shutdown.exe-m \计算机名：控制远程计算机
shutdown.exe-i：显示“远程关机”图形用户界面，但必须是Shutdown的第一个参数
shutdown.exe-c "消息内容"：输入关机对话框中的消息内容
shutdown.exe-d [u][p]:xx:yy ：列出系统关闭的原因代码：u 是用户代码 ，p 是一个计划的关闭代码 ，xx 是一个主要原因代码(小于 256 的正整数) ，yy 是一个次要原因代码(小于 65536的正整数)
比如你的电脑要在12:00关机，可以选择“开始→运行”，输入“at12:00 Shutdown -s"，这样，到了12点电脑就会出现“系统关机”对话框，默认有30秒钟的倒计时并提示你保存工作。 如果你想以倒计时的方式关机，可以输入 “Shutdown.exe -s -t 3600"，这里表示60分钟后自动关机，“3600"代表60分钟。
而发送邮件，我们一般利用一个邮件发送的封装类处理下即可。
/// <summary> ///发送邮件/// </summary> private boolSendMail()
{//统计数据 btnSumaryData_Click(null, null);string title = string.Format("{0}期统计结果-{1}", Portal.gc.CurrentQSNumber, DateTime.Now);//获取控件展示的内容，并把它的换行转换下 List<string> list = new List<string>();
list.AddRange(txtShenxiao.Lines);
list.AddRange(this.txtShenxiao2.Lines);string content = string.Join("<br>", list);//发送邮件 var success =SendMailHelper.SendMail(title, content);returnsuccess;
}
发送邮件的时候，我们先获取用户的邮件配置信息，然后调用邮件发送辅助类实现内容的发送处理，具体代码如下所示。
public classSendMailHelper
{/// <summary> ///发送邮件结果/// </summary> public static bool SendMail(string title, stringcontent)
{//获取配置的邮件信息 string creator = "";//LoginUserInfo.Name; ISettingsStorage store = newDatabaseStorage(creator);
SettingsProvider settings= newSettingsProvider(store);bool result = false;
EmailParameter parameter= settings.GetSettings<EmailParameter>();if (parameter != null)
{//使用邮件辅助类，实现邮件内容的发送 EmailHelper email = newEmailHelper(parameter.SmtpServer, parameter.LoginId, parameter.Password);
email.Subject=title;
email.Body=content;
email.IsHtml= true;
email.Charset= "gb2312";
email.From=parameter.Email;
email.FromName=parameter.Email;
email.AddRecipient(parameter.Email);
result=email.SendEmail();
}returnresult;
}
以上就是整个处理的过程，其中还涉及到了在线程间访问控件的方式，如下代码所示。
这个详细的介绍可以参考我较早期的随笔《
浅谈多线程中数据的绑定和赋值
》，这些细节都需要我们一步步测试并寻找最佳的方案实现，希望这个随笔的思路给你有一定的启发。
当然，如果系统做的比较大一些，系统化一些的话，还可以考虑利用EasyNetQ的这种方式实现信息的通知。
这种通知可以更好的扩展，详细介绍可以参考下随笔《
使用EasyNetQ组件操作RabbitMQ消息队列服务
》，不过一般小程序的就不用那么麻烦了，用一个定时器来处理下就可以了。
我们知道，很多时候为了方便，直接在小程序前端直接调用第三方提供商的接口获取数据，然后显示在小程序上，这种方式也是我们常规的使用接口方式，不过这种方式有个弊端，就是一旦第三方对小程序禁止，那么就无法再获取数据了，类似于豆瓣的电影数据接口，在前几个月还是可以正常访问的，后来不知基于什么原因，就禁止了小程序端的接口调用了，为了解决这个问题，我们可以使用接口中转的代理方式，通过调用自身的API接口获取数据，自身的API对第三方接口进行封装即可。本篇随笔以豆瓣接口为例，实现接口的中转处理，从而确保小程序前端数据获取的正常。
我在较早期的随笔中《
微信小程序豆瓣电影项目的改造过程经验分享
》介绍一个利用豆瓣接口获取其电影资料的小程序，小程序的界面如下所示。
不过由于小程序被豆瓣端进行调用接口，那么再运行小程序就有接口错误了，如下所示。
而我们一般都已经在小程序的设置上添加了豆瓣的域名了
不过由于豆瓣官方对小程序端的限制，那么我们就无法进行正常的接口数据获取了。
我们可以从豆瓣的接口文档中了解到，豆瓣提供了不少电影相关的数据接口，这个是我们用来练手或者加工小程序的很好数据来源，它的接口如下所示。
豆瓣电影接口的API地址如下所示：
https://developers.douban.com/wiki/?title=movie_v2
既然小程序段无法再通过接口方式获取电影数据，但测试电脑端是没问题的，那么我们可以利用自己的API接口对豆瓣接口进行封装，从而实现接口数据的代理接口处理，为了方便，我们还是尽可能把代理接口弄得通用一些，以便其他接口也可以通过中转方式获取，提高中转接口的通用性。
我们先来看看小程序端的JS端对接口的调用代码，如下是获取电影数据的其中一个接口，如下所示。
//通用的热映、待映的获取方式
fetchFilms: function(page, url, city, start, count) {return new Promise((resolve, reject) =>{var that =page;var json ={city: city, start: start, count: count };var type = "json";//特殊设置，默认是application/json
if(that.data.hasMore) {
app.utils.get(url, json, type).then(res=>{if(res.subjects.length === 0){
that.setData({
hasMore:false,
})
}else{
that.setData({
films: that.data.films.concat(res.subjects),
start: that.data.start+res.subjects.length,
showLoading:false})
}
wx.stopPullDownRefresh();
resolve(res);
})
}
})
},这里面核心是通过调用
app.utils.get(url, json, type)
的方式来处理对API的GET方式调用，我们再来看看这个Get方式的调用
//发布的接口 module.exports ={
Promise,makeArray,getUserInfo,
get:requestGet,post:requestPost,request,decodeHtml,
setStorage,getStorage,getLocation,getCityName,
getDate,getTime,formatTime,getDateDiff,getWeek,get2,post2
}
这个
util.js
里面公布的
get
接口就是
requestGet
函数，我们用了别名的方式，它的详细代码如下所示
functionrequestGet(url,data,type){return request(url,'GET',data,type)
}functionrequestPost(url,data,type){return request(url,'POST',data,type)
}//封装Request请求方法 function request(url, method, data = {}, type='application/json'){
wx.showNavigationBarLoading();return new Promise((resove,reject) =>{
wx.request({
url: url,
data: data,
header: {'Content-Type': type},
method: method.toUpperCase(),//OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT success: function(res){
wx.hideNavigationBarLoading()
resove(res.data)
},
fail:function(msg) {
console.log('reqest error',msg)
wx.hideNavigationBarLoading()
reject('fail')
}
})
})
}
通过以上的分析，如果我们需要避免修改太多地方，那么我们把
app.utils.get(url, json, type)
里面的 get 修改为 get2 的方式就好了，其他参数变化等中转信息，封装在
get2
函数内部就好，这样我们只需修改一个函数名称就是了。
中转接口后，处理的方式有所不同，我们需要把整个带有参数的地址作为一个完整的URL传递给服务器接口（需要URL编码，否则无法获得参数），而且由于通用接口无法返回JSON格式，我们还需要返回的字符串内容进行JSON格式的转换。
//使用内部接口进行中转 var wrapper_get_url = 'http://localhost:27206/api/third/httpwrapper/httpget';function get2(url, data = {}, type='application/json') {var newdata ={};var newUrl = wrapper_get_url + "?url=" + encodeURIComponent(url + "?" +json2Form(data));
console.log(newUrl);return new Promise((resolve, reject) =>{
wx.request({
url: newUrl,
data: newdata,
headers: {'Content-Type': type},
success:function(res) {//将中转接口返回的字符串转换为JSON对象 var res =convertJson(res.data);
resolve(res)
},
fail:function(res) {//将中转接口返回的字符串转换为JSON对象 var res =convertJson(res.data);
reject(res)
}
})
})
}
上面的代码我们使用自己的本地接口进行测试，其中需要提交的URL是我们服务器的URL，原先的URL+数据组合为一个新的参数传递给服务器使用。
另外，由于返回的中转接口数据为字符串信息，非JSON格式，那么还需要将中转接口返回的字符串转换为JSON对象。
//转义字符串为JSON对象 functionconvertJson(res) {//将中转获取到的字符串转换为JSON对象 var jsonStr =JSON.stringify(res);var jsonStrSym = jsonStr.replace('/', '\\');var jsondata =JSON.parse(JSON.parse(jsonStr));
console.log(jsondata);returnjsondata;
};
以上就是完整的前端代码了，通过上面的处理，我们可以正常的获得接口的数据，并可以正常的展示了，正式发布的时候，我们修改用上自己的服务器域名地址即可发布使用了。
前面介绍了小程序的前端代码修改，只需要引入一个新的函数就可以实现数据的中转获取了，后端我们自然配合这个接口实现数据的获取即可。
我们在后端增加一个控制器，增加对应的接口定义，如下代码所示。
namespaceWebAPI.Areas.Third.Controllers
{/// <summary> ///对第三方的Http接口数据进行包装，获取数据，避免小程序并禁止获取数据的问题/// </summary> public classHttpWrapperController : BaseApiController
{/// <summary> ///get方式获取数据/// </summary> /// <param name="url">接口URL</param> /// <returns></returns> [HttpGet]public string HttpGet(stringurl)
{
HttpHelper helper= newHttpHelper();var html = helper.GetHtml(url, "", false);returnhtml;
}
是不是比较简单，这样就可以实现通用的接口数据中转了。
最后测试得到的正常数据展示界面，如下所示。
在我们开发的一个小程序里面，为了给客户了解一些教程内容，我们需要增加一个在线播放视频的模块，考虑过直接使用视频组件播放服务器上的视频不成功，因此使用腾讯视频插件来播放最终测试成功。本篇随笔介绍微信小程序使用视频组件和腾讯视频插件两种方式的解决方式，并重点介绍视频插件方式的处理过程。
由于是我们自己录制的视频内容，本来想直接通过视频组件来播放自己服务器上的视频，理想很丰满，现实很骨感，不知道是视频内部比较大的原因还是腾讯禁止，虽然在开发工具上测试的时候可以播放，不过最终发布测试的时候不能播放视频，不过这里也顺带介绍一下基于视频组件的播放处理方式吧。
最简单的代码应该如下所示。
<video src="{{src}}" controls ></video>不过我们一般还可以使用视频组件的其他参数（如果需要的话），详细的说明可以参考地址：
https://developers.weixin.qq.com/miniprogram/dev/component/video.html
为了实现动态的URL的数据绑定，我们可以把一些变量放到一个独立的文件中，也可以根据API接口动态获取。
例如我在一个Config.js里面放置一个固定的待播放视频的数组，如下所示
videos: [
{ id:0, src: '字典管理模块介绍.mp4', poster: '字典管理模块介绍.png', vid:'i0690agm8uf'},
{ id:1, src: '分页控件介绍.mp4', poster: '分页控件介绍.png', vid: 'f06919dlvi9'},
{ id:2, src: '公用类库介绍.mp4', poster: '公用类库介绍.png', vid: 'p0686rsvwbx'},
{ id:3, src: '混合框架之WebAPI接入的增量开发过程.mp4', poster: '混合框架之WebAPI接入的增量开发过程.png', vid: 'd0688o38mkk'},
{ id:4, src: 'Winform框架增量开发过程.mp4', poster: 'Winform框架增量开发过程.png', vid: 'f06919dlvi9'},
{ id:5, src: '混合框架图片显示及存储.mp4', poster: '混合框架图片显示及存储.png', vid: 'f06919dlvi9'},
{ id:5, src: '混合框架增量开发过程.mp4', poster: '混合框架增量开发过程.png', vid: 'e0686jwu3ff'},
],
然后同时定义一个基础的URL地址，如下所示。
video_base_url:"https://www.iqidi.com/doc/Video/",
然后在页面的JS文件里面，我们可以引入这个文件，并给页面对象赋值。
//获取配置的地址 const config = require("../../utils/config.js");
Page({/**
* 页面的初始数据*/data: {
videos:[],
video_base_url:'',
},/**
* 生命周期函数--监听页面加载*/onLoad:function(options) {var that = this;
that.setData({
videos: config.videos,
video_base_url: config.video_base_url
});
然后在界面上定义好视频组件即可。
<!--pages/Video/index.wxml--> <!--1px = 750/320 = 2.34rpx;--> <viewclass="container"> <viewclass="goods-container"> <viewid="myVideo"class="goods-box"wx:for-items="{{videos}}"wx:key="{{index}}"data-id="{{item.id}}"> <viewclass="goods-title">{{item.src}}</view> <videoclass="goods-video"id="{{item.id}}"src="{{video_base_url}}{{item.src}}"controls></video> </view> </view> </view>
这样我们可以在开发工具上看到视频的展示了，而且也可以播放，不过悲剧的是无法发布在手机上看到视频，这个也是介绍使用腾讯视频播放插件的原因。
既然我们无法直接播放自己服务器上的视频，那么我们把它上传到腾讯视频服务器上试试，并且使用腾讯视频的小程序插件来处理。
注册一个腾讯视频的账号，然后在客户端上上传自己的视频内容。
上传成功视频后，我们打开视频播放，在右侧的视频信息里面找到如下菜单
然后查看网页信息，可以看到视频的vid参数了。
腾讯视频插件就是使用这个vid参数进行播放的。
在使用视频插件之前，我们先来介绍如何获得这个插件，小程序插件需要开发者同意才能获得使用权，我们可以在小程序的【设置 -> 第三方服务】里面看到对应的入口。
添加相应的插件，这里是腾讯视频，如下所示。
添加视频后，可以获得视频的APPID进行使用，如下是这个插件的信息。
官方的介绍和使用页面代码如下
不过使用这个小程序的插件还是需要遵循小程序使用插件的几个步骤，详细说明如下所示。
首先需要在app.json里面加入插件的声明，如下所示。
在页面JS代码里面加入插件对象的定义，如果没有在脚本里面使用视频插件，那么也可以不用这行代码
const txvContext = requirePlugin("tencentvideo");在页面里面加入如下代码
<!--pages/Video/index.wxml--> <!--1px = 750/320 = 2.34rpx;--> <viewclass="container"> <viewclass="goods-container"> <viewid="myVideo"class="goods-box"wx:for-items="{{videos}}"wx:key="{{index}}"data-id="{{item.id}}"> <viewclass="goods-title">{{item.src}}</view> <txv-videoclass="goods-video"vid="{{item.vid}}"playerid="txv{{item.id}}"autoplay="{{false}}"></txv-video> </view> </view> </view>
最后注意项目的调试基础类库，选择比较新的，否则有时候太低版本估计开发工具都无法测试通过，我就是忘记修改这里的基础库，导致一直出错还是没有找到原因。
最终手机上测试的效果如下所示，唯一遗憾的就是每个视频都要播放一段广告，郁闷。
总的来说，使用小程序插件还是非常方便简洁的，不过第一次使用总是多少碰到一些问题，慢慢习惯就好了。
还有腾讯视频放在腾讯服务器，也可以减轻自己服务器的访问压力，还可以分享给其他朋友，也是很好的。
最后放上小程序码，大家可以扫码体验下功能。
