澳门新萄京:基于Metronic的Bootstrap开发框架经验总
分类:澳门新萄京最大平台

在大家付出的一个小程序里面,为了给客户精通一些科目内容,我们必要追加三个在线播放摄像的模块,驰念过平昔运用录像组件播放服务器上的录制不成事,由此利用腾讯录像插件来播音最后测试成功。本篇小说介绍微信小程序选拔摄像组件和腾讯录像插件二种方法的化解方法,同仁一视点介绍录像插件情势的管理进度。

在上学微信小程序支付进程中,1部分的难处是前者逻辑的管理,也正是对前者JS的代码编辑;一部分的难关是前者分界面包车型客车安顿性显示;本篇小说基于1个豆子电影接口的小程序开源项目张开双重调度,把当中遇到的相干难题和革新的地点进行讨论介绍,希望给大家提供二个参谋的笔触,本篇小说是依据前人小程序的连串基础上进行的精耕细作,因而在开赛在此以前率先对原来的著小编的费力致敬及多谢。

在念书微信小程序支付进程中,1部分的难题是前者逻辑的管理,也便是对前者JS的代码编辑;一部分的难关是前者分界面包车型地铁设计体现;本篇小说基于多少个豆类电影接口的小程序开源项目开始展览重复调解,把内部碰着的相干难题和改正的地点实行研讨介绍,希望给大家提供三个参照的思绪,本篇小说是依靠前人小程序的品类基础上拓展的改良,由此在开篇从前率先对原来的著我的劳顿致敬及感激。

在学习微信小程序开拓进程中,一部分的难题是前者逻辑的拍卖,也正是对前者JS的代码编辑;1部分的难处是前者分界面包车型大巴统一计划显得;本篇小说基于一个豆类电影接口的小程序开源项目开始展览重复调治,把个中蒙受的相关难题和改正的地点开始展览座谈介绍,希望给大家提供一个参照他事他说加以调查的笔触,本篇散文是依照前人小程序的类型基础上拓展的校对,由此在开始竞技在此之前率先对原来的著小编的困苦致敬及谢谢。

在众多场子,大家供给在线编辑HTML内容,然后在页面上或然其余终端上(如小程序、应用程式应用等)展现,编辑HTML内容的插件有看不尽,本篇介绍基于Bootstrap的 summernote插件达成HTML文书档案的编写制定和图表插入操作,这几个控件的选用10分便利,并且用户群也极大。
Summernote 是3个回顾利落,所见即所得(WYSIWYG)的编辑器,萨默尔note是一个轻量级、灵活基于Bootstrap和jQuery的HTML文本编辑器,具有强劲的API配置效应,多国语言协理协助Bootstrap2.x和3.0,协助摄像和图片上传以及代码的高亮展现,八种后台语言版本示例以及多主体协理,在浏览器包容方面,援助IE九 以及当代的浏览器Chrome,Firefox,Safari等,在移动端应该有不利的展现,如故很准确的,值得使用。
该插件是开源的,官方网站地址:http://summernote.org/,GitHub地址:https://github.com/summernote/summernote/、安装调度都很有益于。

1、使用录制组件播放摄像

一、豆瓣电影接口的小程序项目景况

豆子电影接口提供了许多荣辱与共的接口给我们利用,豆瓣电影接口的API地址如下所示:

澳门新萄京 1

在GitHub的开源Curry面,能够查找到大多关于豆瓣电影接口的小程序,笔者本篇小说是依据 weapp-douban-movie 那个小程序实行的改动处理,后来找到了原文者的项目地址:wechat-weapp-movie,原文者对版本做了二回进级,后来本人相比笔者的调治和笔者最新版本的源码,发掘有一些地点更换的思路有一些相近,如对于U凯雷德L地址外放到联合的布局文件中的管理,不过如故有繁多地点改换差别。

本篇小说的改建方案是依据小程序项目 weapp-douban-movie 的,由此对待的代码也是和那几个举行对比,不驾驭这几个本子是还是不是原著者的旧版本,可是这些版本对文件目录的界别已经展现非常干净利落了,对电影音讯的展现也统1到了模版里面,实行反复的重复利用,全部的布局和代码都做的相比较好,看得出是花了相当多功力举行规整优化的了。

小程序主分界面效果如下所示:

澳门新萄京 2

小程序源码目录结构如下所示:

澳门新萄京 3

但是每种人都有不一样的经验和眼光,对于开拓小程序来讲,小编尊重于采纳安排文件减弱硬编码的常量,使用Promise来优化JS代码的应用,将获取和付出JSON数据的措施封装到援助类,以及采用地理地方接口动态获取当前城市名称和坐标等等。

本篇小说上边包车型地铁部分正是介绍使用那个内容开始展览代码优化的管理进度。

一、豆瓣电影接口的小程序项目情状

豆瓣电影接口提供了许多生死相依的接口给大家接纳,豆瓣电影接口的API地址如下所示:https://developers.douban.com/wiki/?title=movie_v2

澳门新萄京 4

在GitHub的开源Curry面,能够寻找到众多关于豆瓣电影接口的小程序,笔者本篇随笔是基于 weapp-douban-movie 那么些小程序进行的改建处理,后来找到了原版的书文者的品种地址:wechat-weapp-movie,原来的著小编对版本做了二回进级,后来自个儿比较作者的调动和小编最新版本的源码,发掘有个别地方退换的思绪有一点近乎,如对于U奥德赛L地址外放到联合的安顿文件中的管理,可是如故有不知凡几人置改变区别。
本篇小说的改建方案是依据小程序项目 weapp-douban-movie 的,由此对待的代码也是和那些实行比较,不晓得那么些本子是否原文者的旧版本,可是这么些版本对文件目录的分别已经显示10分干净利落了,对影片新闻的体现也统壹到了模版里面,进行反复的再度使用,全部的布局和代码都做的可比好,看得出是花了繁多功力进行重新整建优化的了。
小程序主界面效果如下所示:

澳门新萄京 5

小程序源码目录结构如下所示:

澳门新萄京 6

可是各类人都有两样的经验和眼光,对于开垦小程序来讲,我注重于采用安顿文件收缩硬编码的常量,使用Promise来优化JS代码的应用,将获得和交给JSON数据的秘诀封装到辅助类,以及选取地理地点接口动态获取当前城市称号和坐标等等。
本篇小说上面的一些就是介绍使用那个内容张开代码优化的处理进度。

一、豆瓣电影接口的小程序项目情况

豆瓣电影接口提供了相当的多连锁的接口给我们选用,豆瓣电影接口的API地址如下所示:

澳门新萄京 7

在GitHub的开源Curry面,能够搜索到广大有关豆瓣电影接口的小程序,笔者本篇小说是基于 weapp-douban-movie 这几个小程序开始展览的改造管理,后来找到了原来的著笔者的品种地址:wechat-weapp-movie,原来的小说者对版本做了一次进级,后来小编相比较作者的调动和我最新版本的源码,开采有个别地点退换的思绪有一点点看似,如对于U奥迪Q5L地址外放到统1的计划文件中的管理,可是依旧有众多地方更动不相同。

本篇随笔的更改方案是依附属小学程序项目 weapp-douban-movie 的,因而看待的代码也是和这么些实行相比,不通晓那几个版本是否原著者的旧版本,可是这些本子对文件目录的区别已经显得非凡干净利落了,对影片音信的显示也联合到了模版里面,实行反复的再一次使用,全部的布局和代码都做的可比好,看得出是花了不胜枚举功力举行重整优化的了。

小程序主分界面效果如下所示:

澳门新萄京 8

小程序源码目录结构如下所示:

澳门新萄京 9

不过每种人都有两样的经验和眼光,对于开拓小程序来讲,作者尊重于采用安排文件缩短硬编码的常量,使用Promise来优化JS代码的使用,将获取和提交JSON数据的办法封装到匡助类,以及利用地理地点接口动态获取当前城市名称和坐标等等。

本篇随笔上边包车型地铁一对正是介绍使用那几个剧情展开代码优化的管理进度。

一、萨默尔note的简要利用

选用办法:
1)、加载JS和CSS

<!-- include libraries(jQuery, bootstrap) -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://www.xb-cj.com/uploads/allimg/190525/05191W191-9.jpg"></script> 
<script src="http://www.xb-cj.com/uploads/allimg/190525/05191V4X-10.jpg"></script> 

<!-- include summernote css/js-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.7/summernote.css" rel="stylesheet">
<script src="http://www.xb-cj.com/uploads/allimg/190525/05191T0c-11.jpg"></script>

基于MVC的Asp.net应用程序中,大家一般在BundleConfig.cs里面起首化大家的引进JS文件,如下所示。

            //添加对bootstrap-summernote的支持
            css_metronic.Include("~/Content/metronic/assets/global/plugins/bootstrap-summernote/summernote.css");
            js_metronic.Include("~/Content/metronic/assets/global/plugins/bootstrap-summernote/summernote.min.js");
            js_metronic.Include("~/Content/metronic/assets/global/plugins/bootstrap-summernote/lang/summernote-zh-CN.min.js");
            bundles.Add(css_metronic);
            bundles.Add(js_metronic);

2)、编写HTML内容

在HTML页面代码扩大上边包车型大巴暗记。

<div id="summernote">Hello Summernote</div>

三)、开始化调用

简单来说的开首化代码如下所示。

$(document).ready(function() {
  $('#summernote').summernote();
});

一旦扩张控件中度的概念,则如下所示。

$('#summernote').summernote({
  height: 300,   
  focus: true    
});

而详细的发轫化分界面,一般还包涵语言国际化、图片上传等处理代码,如下所示

function initEditor() {
    $('#Note').summernote({
        lang: 'zh-CN',       // default: 'en-US'
        height: 600,         // set editor height                
        minHeight: null,    // set minimum height of editor
        maxHeight: null,    // set maximum height of editor
        focus: true,         // set focus to editable area after initializing summe
        callbacks: {
            onImageUpload: function (files) { //the onImageUpload API  
                img = sendFile(files[0]);
            }
        }
    });
}

4)、获取内容

var markupStr = $('#summernote').summernote('code');

伍)、设置剧情

安装剧情和获得内容相近,在code前面扩充内需写入的HTML内容就可以。

var markupStr = 'hello world';
$('#summernote').summernote('code', markupStr);

出于是我们友好摄像的录像内容,本来想直接通过摄像组件来播音自身服务器上的摄像,理想很富厚,现实很骨感,不知道是录制之中非常大的开始和结果或然腾讯明确命令禁止,即便在开辟工具上测试的时候能够播放,不过最终宣告测试的时候不可能播放录像,不过这里也顺手介绍一下依据摄像组件的播放管理情势吧。

一、使用安顿文件定义常量内容

咱俩在选拔任何代码开拓顺序的时候,大家都以老大在意一些变量或常量的运用,即便能够联合定义那就集结定义好了,这种在小程序的JS代码里面也是平等,大家尽量收取一些如U普拉多L,固定参数等消息到独门的配置文件中,那样在JS代码引进文件,使用变量来替代

举例原来的config.js文件之中,只是概念了二个地方和页面数量的大大小小常量,如下所示

module.exports = {
    city: '杭州',
    count: 20
}

原本的小程序代码在获得待映的录像内容时候,部分源码如下所示

澳门新萄京 10

其他页面JS代码也和那么些看似,尾部依然有成都百货上千类似那样U路虎极光L地址,这一个是自家盼望统1到config.js文件的地方,其余那些调用的函数是行使回调函数的管理方式,如下所示。

douban.fetchFilms.call(that, url, config.city, that.data.start, config.count)

其实自个儿以为那其间既然是概念的表面函数,那么这里面包车型地铁url, city, config.city, config.cout都无需这里,在封装函数内部选择那个常量即可,由此得以对她们开始展览改建,如下大家归总收取各类文件之中的UTiguanL,以及一些大面积变量到config.js里面。

上面代码是自家优化整治后的布署参数消息。

module.exports = {
    city: '',
    location:'0,0',
    count: 20,

    coming_soon_url: 'https://api.douban.com/v2/movie/coming_soon',
    in_theaters_url: 'https://api.douban.com/v2/movie/in_theaters',
    top_url: 'https://api.douban.com/v2/movie/top250',
    search_url: 'https://api.douban.com/v2/movie/search?tag=',
    detail_url: 'https://api.douban.com/v2/movie/subject/', //?id=
    celebrity_url: 'https://api.douban.com/v2/movie/celebrity/',
    baidu_ak:'6473aa8cbc349933ed841467bf45e46b',
    baidu_movie:'https://api.map.baidu.com/telematics/v3/movie',

    hotKeyword: ['功夫熊猫', '烈日灼心', '摆渡人', '长城', '我不是潘金莲', '这个杀手不太冷', '驴得水', '海贼王之黄金城', '西游伏妖片', '我在故宫修文物', '你的名字'],
    hotTag: ['动作', '喜剧', '爱情', '悬疑'],
}

地点的配置文件config.js里面,作者联合抽出了各种页面的U奥迪Q伍L地址、关键词和标签(hotKeyword和hotTag)、城市及地方(city和location前面动态获取)、页面数量count等参数新闻。

别的由于一些参数统一通过config.js获取,就无需再行在调用的时候传出了,由此简化调用代码的参数字传送入,如下代码所示。

douban.fetchComming(that, that.data.start)

对此原来的代码

douban.fetchFilms.call(that, url, config.city, that.data.start, config.count)

简化的就算十分的少,可是尽量的涵养干净轻巧的接口是大家的靶子,而且这里把例行的ULacrosseL等参数提取到函数里面,特别吻合大家编码的习贯。

此间定义的douban.fetchComming(that, that.data.start) 行使了Promise来简化代码,传入的that参数是因为须求在函数体里面安装该页面里面的Data等管理。

 关于Promise的相干管理,大家在上面进行介绍。

 

二、使用布署文件定义常量内容

我们在利用此外轮代理公司码开拓顺序的时候,大家都是充裕注意一些变量或常量的施用,要是能够合并定义那就联合定义好了,这种在小程序的JS代码里面也是同1,大家尽量收取一些如U猎豹CS陆L,固定参数等新闻到独门的配备文件中,那样在JS代码引进文件,使用变量来代表
比方原来的config.js文件之中,只是概念了2个地方和页面数量的轻重缓急常量,如下所示

module.exports = {
    city: '杭州',
    count: 20
}

本来的小程序代码在得到待映的影片内容时候,部分源码如下所示

澳门新萄京 11

其它页面JS代码也和这几个类似,底部依然有成都百货上千好像那样UTiggoL地址,那几个是小编盼望统壹到config.js文件的地方,此外那几个调用的函数是使用回调函数的处理格局,如下所示。

douban.fetchFilms.call(that, url, config.city, that.data.start, config.count)

骨子里本人认为那其间既然是概念的表面函数,那么这里面包车型地铁url, city, config.city, config.cout都无需这里,在封装函数内部选择这个常量就能够,由此得以对他们举行改建,如下大家归总收取各种文件之中的U大切诺基L,以及一些科学普及变量到config.js里面。

上边代码是自身优化整治后的铺排参数新闻。

module.exports = {
    city: '',
    location:'0,0',
    count: 20,

    coming_soon_url: 'https://api.douban.com/v2/movie/coming_soon',
    in_theaters_url: 'https://api.douban.com/v2/movie/in_theaters',
    top_url: 'https://api.douban.com/v2/movie/top250',
    search_url: 'https://api.douban.com/v2/movie/search?tag=',
    detail_url: 'https://api.douban.com/v2/movie/subject/', //?id=
    celebrity_url: 'https://api.douban.com/v2/movie/celebrity/',
    baidu_ak:'6473aa8cbc349933ed841467bf45e46b',
    baidu_movie:'https://api.map.baidu.com/telematics/v3/movie',

    hotKeyword: ['功夫熊猫', '烈日灼心', '摆渡人', '长城', '我不是潘金莲', '这个杀手不太冷', '驴得水', '海贼王之黄金城', '西游伏妖片', '我在故宫修文物', '你的名字'],
    hotTag: ['动作', '喜剧', '爱情', '悬疑'],

下面的配备文件config.js里面,笔者联合收取了1壹页面的UPRADOL地址、关键词和标签(hotKeyword和hotTag)、城市及地点(city和location后边动态获取)、页面数量count等参数消息。

除此以外是因为局地参数统1通过config.js获取,就没有要求再一次在调用的时候传出了,因而简化调用代码的参数字传送入,如下代码所示。

douban.fetchComming(that, that.data.start)

对于原来的代码

douban.fetchFilms.call(that, url, config.city, that.data.start, config.count)

简化的就算非常的少,不过尽量的保障到底轻巧的接口是咱们的靶子,而且这里把寻常的U宝马X3L等参数提取到函数里面,尤其适合大家编码的习贯。
此处定义的**douban.fetchComming(that, that.data.start) **动用了Promise来简化代码,传入的that参数是因为急需在函数体里面安装该页面里面包车型地铁Data等拍卖。
至于Promise的有关管理,大家在上边进行介绍。

1、使用安顿文件定义常量内容

咱俩在选择其余代码开采顺序的时候,大家都以老大小心一些变量或常量的运用,假诺能够合并定义那就集结定义好了,这种在小程序的JS代码里面也是均等,大家尽量收取一些如UPRADOL,固定参数等音讯到独门的布局文件中,那样在JS代码引进文件,使用变量来替代

比如原来的config.js文件之中,只是概念了二个地址和页面数量的分寸常量,如下所示

module.exports = {
    city: '杭州',
    count: 20
}

原先的小程序代码在取得待映的电影内容时候,部分源码如下所示

澳门新萄京 12

别的页面JS代码也和这一个仿佛,底部照旧有无数类似那样UBMWX5L地址,这么些是本身希望统1到config.js文件的地点,其余这么些调用的函数是采纳回调函数的管理方式,如下所示。

douban.fetchFilms.call(that, url, config.city, that.data.start, config.count)

实则小编以为那其间既然是概念的外部函数,那么这里面包车型客车url, city, config.city, config.cout都无需这里,在封装函数内部使用这几个常量就可以,因而得以对她们开始展览更换,如下我们归总收取各样文件之中的U智跑L,以及部分广阔变量到config.js里面。

上边代码是本人优化整治后的安顿参数新闻。

module.exports = {
    city: '',
    location:'0,0',
    count: 20,

    coming_soon_url: 'https://api.douban.com/v2/movie/coming_soon',
    in_theaters_url: 'https://api.douban.com/v2/movie/in_theaters',
    top_url: 'https://api.douban.com/v2/movie/top250',
    search_url: 'https://api.douban.com/v2/movie/search?tag=',
    detail_url: 'https://api.douban.com/v2/movie/subject/', //?id=
    celebrity_url: 'https://api.douban.com/v2/movie/celebrity/',
    baidu_ak:'6473aa8cbc349933ed841467bf45e46b',
    baidu_movie:'https://api.map.baidu.com/telematics/v3/movie',

    hotKeyword: ['功夫熊猫', '烈日灼心', '摆渡人', '长城', '我不是潘金莲', '这个杀手不太冷', '驴得水', '海贼王之黄金城', '西游伏妖片', '我在故宫修文物', '你的名字'],
    hotTag: ['动作', '喜剧', '爱情', '悬疑'],
}

下面的配置文件config.js里面,小编联合收取了逐1页面包车型地铁U昂CoraL地址、关键词和标签(hotKeyword和hotTag)、城市及地方(city和location后边动态获取)、页面数量count等参数音讯。

别的由于某个参数统一通过config.js获取,就无需再行在调用的时候传出了,因而简化调用代码的参数传入,如下代码所示。

douban.fetchComming(that, that.data.start)

对此原来的代码

douban.fetchFilms.call(that, url, config.city, that.data.start, config.count)

简化的即便没多少,不过尽量的保持干净轻易的接口是大家的靶子,而且这里把平时的U帕杰罗L等参数提取到函数里面,特别适合大家编码的习贯。

这里定义的douban.fetchComming(that, that.data.start) 接纳了Promise来简化代码,传入的that参数是因为要求在函数体里面安装该页面里面的Data等管理。

 关于Promise的连带管理,我们在上面进行介绍。

 

2、 summernote插件在事实上项目中的使用

地方介绍了健康 summernote插件的施用进度,一般意况下,大家采纳它除了编辑HTML内容外,还需求对图片上传举办拍卖,以担保大家得以平昔把公文上流传后台文件系统里面去,而不是把它们转变为Base6肆的编码放在页面内。

相似的初阶化代码如下所示。

function initEditor() {
    $('#Note').summernote({
        lang: 'zh-CN',       // default: 'en-US'
        height: 600,         // set editor height                
        minHeight: null,    // set minimum height of editor
        maxHeight: null,    // set maximum height of editor
        focus: true,         // set focus to editable area after initializing summe
        callbacks: {
            onImageUpload: function (files) { //the onImageUpload API  
                img = sendFile(files[0]);
            }
        }
    });
}

里头的sendFile的函数如下所示,重要是调用附属类小部件管理模块进行文件的仓库储存。

//提交文件到服务器处理
function sendFile(file) {
    data = new FormData();
    data.append("file", file);
    //增加额外的参数
    data.append("folder", '商品信息');
    data.append("guid", $("#ID").val());

    $.ajax({
        data: data,
        type: "POST",
        url: "/FileUpload/Upload",
        cache: false,
        contentType: false,
        processData: false,
        success: function (json) {
            var data = $.parseJSON(json);
            var url = data.urls[0];
            $("#Note").summernote('insertImage', url, 'image name'); // the insertImage API  
        }
    });
}

诚如的话,我们的文件为了在五个利用之间共享管理,一般提议以FTP格局进行拍卖,那上头能够参照小说《在附属类小部件管理模块中追加对FTP 上传和预览的扶助》,FTP上传文件能够运用FluentFTP那个组件(GitHub地址:https://github.com/hgupta9/FluentFTP ),这么些是三个运用很广,功效很有力的FTP组件。
上传附属类小部件到服务器上的后台调节器代码如下所示,主若是营造文件信息,上传后重临对应的UPRADOL,然后就能够在 summernote插件上海展览中心示图片了。

/// <summary>
/// 上传附件到服务器上
/// </summary>
/// <param name="fileData">附件信息</param>
/// <param name="guid">附件组GUID</param>
/// <param name="folder">指定的上传目录</param>
/// <returns></returns>
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Upload(string guid, string folder)
{
    //如果需要修改字段显示,则参考下面代码处理
    dynamic obj = new ExpandoObject();
    List<string> urls = new List<string>();
    var result = new CommonResult();

    HttpFileCollectionBase files = HttpContext.Request.Files;
    if (files != null)
    {
        foreach (string key in files.Keys)
        {
            try
            {
                #region MyRegion
                HttpPostedFileBase fileData = files[key];
                if (fileData != null)
                {
                    HttpContext.Request.ContentEncoding = Encoding.GetEncoding("UTF-8");
                    HttpContext.Response.ContentEncoding = Encoding.GetEncoding("UTF-8");
                    HttpContext.Response.Charset = "UTF-8";

                    string fileName = Path.GetFileName(fileData.FileName);      //原始文件名称
                    string fileExtension = Path.GetExtension(fileName);         //文件扩展名

                    FileUploadInfo info = new FileUploadInfo();
                    info.FileData = ReadFileBytes(fileData);
                    if (info.FileData != null)
                    {
                        info.FileSize = info.FileData.Length;
                    }
                    info.Category = folder;
                    info.FileName = fileName;
                    info.FileExtend = fileExtension;
                    info.AttachmentGUID = guid;

                    info.AddTime = DateTime.Now;
                    info.Editor = CurrentUser.Name;//登录人
                    //info.Owner_ID = OwerId;//所属主表记录ID

                    result = BLLFactory<FileUpload>.Instance.Upload(info);
                    if (!result.Success)
                    {
                        LogTextHelper.Error("上传文件失败:"   result.ErrorMessage);
                    }
                    else
                    {
                        //返回具体路径地址
                        string serverRealPath = info.BasePath.UriCombine(info.SavePath);
                        if (!Path.IsPathRooted(info.BasePath) &&
                            !info.BasePath.StartsWith("http://") &&
                            !info.BasePath.StartsWith("https://"))
                        {
                            //如果是相对目录,加上当前程序的目录才能定位文件地址
                            var url = HttpContext.Request.Url;
                            var baseurl = url.AbsoluteUri.Replace(url.PathAndQuery, "");
                            serverRealPath = baseurl.UriCombine(serverRealPath).Replace('\', '/');
                        }
                        urls.Add(serverRealPath);
                    }
                }
                #endregion
            }
            catch (Exception ex)
            {
                result.ErrorMessage = ex.Message;
                LogTextHelper.Error(ex);
            }
        }
        obj.urls = urls;
    }
    else
    {
        result.ErrorMessage = "fileData对象为空";
    }

    var newResult = new { Success = result.Success, ErrorMessage = result.ErrorMessage, urls = urls };
    return ToJsonContent(newResult);
}

分界面效果如小编在小说介绍的等同《微信小程序结合后台数据处理落到实处商品数量的动态展现、维护》。
案例对物品的详细音信的富文本实行编写制定,来进展图纸文字的编纂处理,如下分界面所示。

当大家插入图片的时候,弹出叁个会话框分界面,选取文件上传后再次回到U瑞鹰L展现在SummerNote插件上。

上传文件成功后,通过上面包车型大巴代码插入贰个图片,如下代码。

$.ajax({
    data: data,
    type: "POST",
    url: "/FileUpload/Upload",
    cache: false,
    contentType: false,
    processData: false,
    success: function (json) {
        var data = $.parseJSON(json);
        var url = data.urls[0];
        $("#Note").summernote('insertImage', url, 'image name'); // the insertImage API  
    }
});

上述便是自个儿在实际上的Bootstrap框架项目中接纳summernote插件达成HTML文书档案的编写和图纸插入操作,全部性依旧比较轻巧上手的,经验供我们借鉴。
别的连锁随笔能够仿效阅读下:
《组成bootstrap fileinput插件和Bootstrap-table表格插件,达成公文上传、预览、提交的导入Excel数据操作流程》
《传说Metronic的Bootstrap开辟框架经验总计(1陆)-- 使用插件bootstrap-table达成表格记录的询问、分页、排序等处理》
据说Metronic的Bootstrap开荒框架经验总计(一五)-- 更新使用Metronic 四.7五版本
从花费框架进步费用作用聊到
依附Metronic的Bootstrap开辟框架经验总计(1肆)--条码和贰维码的转换及打字与印刷管理
依靠Metronic的Bootstrap开荒框架经验总括(1叁)--页面链接收藏夹功用的贯彻二
依靠Metronic的Bootstrap开辟框架经验总括(12)--页面链接收藏夹成效的贯彻
根据Metronic的Bootstrap开荒框架经验总括(1壹)--页面菜单的两种表现格局
根据Metronic的Bootstrap开拓框架经验计算(10)--优化BootstrapLogo管理
在MVC调控器里面使用dynamic和ExpandoObject,完成数据转义的输出
基于Metronic的Bootstrap开拓框架经验总计(九)--达成Web页面内容的打字与印刷预览和保存操作
据他们说Metronic的Bootstrap开辟框架经验计算(8)--框架功效完全分界面介绍
基于Metronic的Bootstrap开拓框架经验总结(7)--数据的导入、导出及附属类小部件的查阅管理
基于Metronic的Bootstrap开辟框架经验统计(六)--对话框及提醒框的拍卖和优化
基于Metronic的Bootstrap开荒框架经验总括(伍)--Bootstrap文件上传插件File Input的接纳
基于Metronic的Bootstrap开拓框架经验总括(四)--BootstrapLogo的提取和采纳
依赖Metronic的Bootstrap开垦框架经验总计(③)--下拉列表Select贰插件的利用
依附Metronic的Bootstrap开采框架经验总结(二)--列表分页管理和插件JSTree的行使
遵照Metronic的Bootstrap开垦框架经验总计(一)-框架总览及菜单模块的拍卖

最简易的代码应该如下所示。

2、使用Promise来优化JS代码

有关Promise的便宜和怎么着使用Promise插件介绍,作者在小说《在微信小程序的JS脚本中利用Promise来优化函数管理》中已有介绍,小编很欣赏使用这种Promise的风格代码,而且能够定义一些常用的扶助类来加强代码的选拔。在本身参谋的那几个豆瓣电影小程序如故选拔正规回调的函数,相比原来的作品者最新版本的 wechat-weapp-movie 小程序,也仍旧利用回调函数形式来拍卖,有一些奇怪为啥不引入Promise插件来开拓。

原来的小程序,电影接口的有关处理,统一在fetch.js里面进行拍卖,这里封装对各类豆瓣API接口的调用。

澳门新萄京 13

此地大家来探视原来程序没有采取Promise的回调函数管理代码

var config = require('./config.js')
var message = require('../../component/message/message')

module.exports = {
    fetchFilms: function(url, city, start, count, cb) {
      var that = this
      if (that.data.hasMore) {
        wx.request({
          url: url,
          data: {
            city: config.city,
            start: start,
            count: count
          },
          method: 'GET', 
          header: {
            "Content-Type": "application/json,application/json"
          },
          success: function(res){
            if(res.data.subjects.length === 0){
              that.setData({
                hasMore: false,
              })
            }else{
              that.setData({
                films: that.data.films.concat(res.data.subjects),
                start: that.data.start   res.data.subjects.length,
                showLoading: false
              })
            }
            wx.stopPullDownRefresh()
            typeof cb == 'function' && cb(res.data)
          },
          fail: function() {
            that.setData({
                showLoading: false
            })
            message.show.call(that,{
              content: '网络开小差了',
              icon: 'warning',
              duration: 3000
            })
          }
        })
      }
    },

本条函数是一个通用的函数,用来赢得待映、热播、top250口碑的笔录消息,可是它把参数抛给调用者传入,因而显得调用相比复杂一些,大家由此选取Promise优化代码管理,并对接口的参数进行简化,代码改造如下所示。

var config = require('./config.js')
var message = require('../../component/message/message')
var app = getApp()//获取应用实例

module.exports = {
    //待映
    fetchComming : function(page, start) {
      return this.fetchFilms(page, config.coming_soon_url, config.city, start, config.count);
    },
    //热映
    fetchPopular : function(page, start) {
      return this.fetchFilms(page, config.in_theaters_url, config.city, start, config.count);
    },
    //top250口碑
    fetchTop : function(page, start) {
      return this.fetchFilms(page, config.top_url, config.city, start, config.count);
    },

    //通用的热映、待映的获取方式
    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);            
          })
        }
      })
    },

终极的哀告接口参数唯有多个,一个是页面前蒙受象,多个是伸手的开头地方,如下代码所示

function(page, start)

除此以外大家利用了代码

app.utils.get(url, json, type)

来对wx.request方法的合并封装,直接使用工具类里面包车型大巴章程就可以得到结果,不要求频仍的、臃肿的拍卖代码。这就是我们采纳Promise来优化JS,并抽取常用代码到工具类里面包车型地铁做法。

咱俩再来相比一下拿走电影详细音信的接口函数封装,原来代码如下所示。

    fetchFilmDetail: function(url, id, cb) {
      var that = this;
      wx.request({
        url: url   id,
        method: 'GET',
        header: {
          "Content-Type": "application/json,application/json"
        },
        success: function(res){
          that.setData({
            filmDetail: res.data,
            showLoading: false,
            showContent: true
          })
          wx.setNavigationBarTitle({
              title: res.data.title
          })
          wx.stopPullDownRefresh()
          typeof cb == 'function' && cb(res.data)
        },
        fail: function() {
          that.setData({
              showLoading: false
          })
          message.show.call(that,{
            content: '网络开小差了',
            icon: 'warning',
            duration: 3000
          })
        }
      })
    },

自家退换后的函数代码如下所示。

    //获取电影详细信息
    fetchFilmDetail: function(page, id) {      
      return new Promise((resolve, reject) => {
        var that = page;
        var url = config.detail_url   id;
        var type = "json";//特殊设置,默认是application/json
        app.utils.get(url, {}, type).then(res => {
            that.setData({
              filmDetail: res,
              showLoading: false,
              showContent: true
            });

            wx.setNavigationBarTitle({
                title: res.title
            });
            wx.stopPullDownRefresh(); 

            resolve(res);   
        });
      })
    },

经过对fetch.js函数代码的改建处理,能够看看调用的JS代码参数收缩了累累,而且页面也不用保留那么多连接等参数常量音讯了。

    onLoad: function() {
        var that = this
        douban.fetchComming(that, that.data.start)
    },

 

3、使用Promise来优化JS代码

有关Promise的裨益和怎么着行使Promise插件介绍,作者在小说《在微信小程序的JS脚本中接纳Promise来优化函数管理》中已有介绍,作者很喜欢使用这种Promise的风格代码,而且能够定义一些常用的协理类来增进代码的任用。在自个儿参照他事他说加以考查的那几个豆瓣电影小程序依旧使用正规回调的函数,相比较原来的书文者最新版本的 wechat-weapp-movie 小程序,也仍旧利用回调函数方式来管理,有一点离奇为啥不引进Promise插件来开辟。
原本的小程序,电影接口的相干管理,统一在fetch.js里面举办管理,这里封装对种种豆瓣API接口的调用。

澳门新萄京 14

那边大家来看看原来程序未有使用Promise的回调函数管理代码

var config = require('./config.js')
var message = require('../../component/message/message')

module.exports = {
    fetchFilms: function(url, city, start, count, cb) {
      var that = this
      if (that.data.hasMore) {
        wx.request({
          url: url,
          data: {
            city: config.city,
            start: start,
            count: count
          },
          method: 'GET', 
          header: {
            "Content-Type": "application/json,application/json"
          },
          success: function(res){
            if(res.data.subjects.length === 0){
              that.setData({
                hasMore: false,
              })
            }else{
              that.setData({
                films: that.data.films.concat(res.data.subjects),
                start: that.data.start   res.data.subjects.length,
                showLoading: false
              })
            }
            wx.stopPullDownRefresh()
            typeof cb == 'function' && cb(res.data)
          },
          fail: function() {
            that.setData({
                showLoading: false
            })
            message.show.call(that,{
              content: '网络开小差了',
              icon: 'warning',
              duration: 3000
            })
          }
        })
      }
    },

那个函数是三个通用的函数,用来获得待映、热播、top250口碑的记录消息,可是它把参数抛给调用者传入,因而显得调用相比较复杂一些,大家通过采用Promise优化代码管理,并对接口的参数实行简化,代码改变如下所示。

var config = require('./config.js')
var message = require('../../component/message/message')
var app = getApp()//获取应用实例

module.exports = {
    //待映
    fetchComming : function(page, start) {
      return this.fetchFilms(page, config.coming_soon_url, config.city, start, config.count);
    },
    //热映
    fetchPopular : function(page, start) {
      return this.fetchFilms(page, config.in_theaters_url, config.city, start, config.count);
    },
    //top250口碑
    fetchTop : function(page, start) {
      return this.fetchFilms(page, config.top_url, config.city, start, config.count);
    },

    //通用的热映、待映的获取方式
    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);            
          })
        }
      })
    },

最后的请求接口参数唯有五个,一个是页面对象,3个是请求的胚胎地方,如下代码所示

function(page, start)

除此以外大家接纳了代码

app.utils.get(url, json, type)

来对wx.request方法的相会封装,直接行使工具类里面包车型地铁不贰诀窍就可以获得结果,无需反复的、臃肿的管理代码。那正是我们使用Promise来优化JS,并收取常用代码到工具类里面包车型地铁做法。

大家再来比较一下收获电影详细音信的接口函数封装,原来代码如下所示。

    fetchFilmDetail: function(url, id, cb) {
      var that = this;
      wx.request({
        url: url   id,
        method: 'GET',
        header: {
          "Content-Type": "application/json,application/json"
        },
        success: function(res){
          that.setData({
            filmDetail: res.data,
            showLoading: false,
            showContent: true
          })
          wx.setNavigationBarTitle({
              title: res.data.title
          })
          wx.stopPullDownRefresh()
          typeof cb == 'function' && cb(res.data)
        },
        fail: function() {
          that.setData({
              showLoading: false
          })
          message.show.call(that,{
            content: '网络开小差了',
            icon: 'warning',
            duration: 3000
          })
        }
      })
    },

自家退换后的函数代码如下所示。

    //获取电影详细信息
    fetchFilmDetail: function(page, id) {      
      return new Promise((resolve, reject) => {
        var that = page;
        var url = config.detail_url   id;
        var type = "json";//特殊设置,默认是application/json
        app.utils.get(url, {}, type).then(res => {
            that.setData({
              filmDetail: res,
              showLoading: false,
              showContent: true
            });

            wx.setNavigationBarTitle({
                title: res.title
            });
            wx.stopPullDownRefresh(); 

            resolve(res);   
        });
      })
    },

由此对fetch.js函数代码的改建管理,能够看看调用的JS代码参数减弱了过多,而且页面也不用保留那么多连接等参数常量音讯了。

    onLoad: function() {
        var that = this
        douban.fetchComming(that, that.data.start)
    },

2、使用Promise来优化JS代码

至于Promise的裨益和怎么着行使Promise插件介绍,作者在小说《在微信小程序的JS脚本中央银行使Promise来优化函数管理》中已有介绍,小编很欢乐使用这种Promise的品格代码,而且能够定义一些常用的支持类来增长代码的录取。在本身参谋的这一个豆瓣电影小程序依然利用正规回调的函数,相比原著者最新版本的 wechat-weapp-movie 小程序,也一仍其旧利用回调函数方式来拍卖,有一点点诡异为何不引入Promise插件来支付。

原先的小程序,电影接口的相关管理,统一在fetch.js里面进行拍卖,这里封装对种种豆瓣API接口的调用。

澳门新萄京 15

此处大家来探望原来程序未有运用Promise的回调函数管理代码

var config = require('./config.js')
var message = require('../../component/message/message')

module.exports = {
    fetchFilms: function(url, city, start, count, cb) {
      var that = this
      if (that.data.hasMore) {
        wx.request({
          url: url,
          data: {
            city: config.city,
            start: start,
            count: count
          },
          method: 'GET', 
          header: {
            "Content-Type": "application/json,application/json"
          },
          success: function(res){
            if(res.data.subjects.length === 0){
              that.setData({
                hasMore: false,
              })
            }else{
              that.setData({
                films: that.data.films.concat(res.data.subjects),
                start: that.data.start   res.data.subjects.length,
                showLoading: false
              })
            }
            wx.stopPullDownRefresh()
            typeof cb == 'function' && cb(res.data)
          },
          fail: function() {
            that.setData({
                showLoading: false
            })
            message.show.call(that,{
              content: '网络开小差了',
              icon: 'warning',
              duration: 3000
            })
          }
        })
      }
    },

其壹函数是贰个通用的函数,用来获得待映、热播、top250口碑的笔录音信,可是它把参数抛给调用者传入,由此显得调用比较复杂一些,我们通过选择Promise优化代码处理,并对接口的参数实行简化,代码改造如下所示。

var config = require('./config.js')
var message = require('../../component/message/message')
var app = getApp()//获取应用实例

module.exports = {
    //待映
    fetchComming : function(page, start) {
      return this.fetchFilms(page, config.coming_soon_url, config.city, start, config.count);
    },
    //热映
    fetchPopular : function(page, start) {
      return this.fetchFilms(page, config.in_theaters_url, config.city, start, config.count);
    },
    //top250口碑
    fetchTop : function(page, start) {
      return this.fetchFilms(page, config.top_url, config.city, start, config.count);
    },

    //通用的热映、待映的获取方式
    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);            
          })
        }
      })
    },

最后的伸手接口参数唯有七个,二个是页面临象,二个是伸手的发轫地方,如下代码所示

function(page, start)

除此以外大家利用了代码

app.utils.get(url, json, type)

来对wx.request方法的合并封装,直接使用工具类里面包车型客车法子就能够获取结果,无需反复的、臃肿的拍卖代码。那就是大家采取Promise来优化JS,并收取常用代码到工具类里面包车型地铁做法。

我们再来相比一下获得电影详细音信的接口函数封装,原来代码如下所示。

    fetchFilmDetail: function(url, id, cb) {
      var that = this;
      wx.request({
        url: url   id,
        method: 'GET',
        header: {
          "Content-Type": "application/json,application/json"
        },
        success: function(res){
          that.setData({
            filmDetail: res.data,
            showLoading: false,
            showContent: true
          })
          wx.setNavigationBarTitle({
              title: res.data.title
          })
          wx.stopPullDownRefresh()
          typeof cb == 'function' && cb(res.data)
        },
        fail: function() {
          that.setData({
              showLoading: false
          })
          message.show.call(that,{
            content: '网络开小差了',
            icon: 'warning',
            duration: 3000
          })
        }
      })
    },

作者改动后的函数代码如下所示。

    //获取电影详细信息
    fetchFilmDetail: function(page, id) {      
      return new Promise((resolve, reject) => {
        var that = page;
        var url = config.detail_url   id;
        var type = "json";//特殊设置,默认是application/json
        app.utils.get(url, {}, type).then(res => {
            that.setData({
              filmDetail: res,
              showLoading: false,
              showContent: true
            });

            wx.setNavigationBarTitle({
                title: res.title
            });
            wx.stopPullDownRefresh(); 

            resolve(res);   
        });
      })
    },

由此对fetch.js函数代码的改建管理,能够看到调用的JS代码参数收缩了多数,而且页面也不用保留那么多连接等参数常量音信了。

    onLoad: function() {
        var that = this
        douban.fetchComming(that, that.data.start)
    },

 

<video src="{{src}}" controls ></video>

3、使用地理地点接口动态获取当前都市名称和坐标

本来程序行使硬编码的法子设置当前都市,如下脚本所示

module.exports = {
    city: '杭州',
    count: 20
}

然则我们不一样地点的人手运用的时候,那些都市名称料定必要扭转的,因而得以选用微信的地理地方接口动态获取当前地方音信,然后写入到布署文件之中就能够。

//获取当前位置信息
function getLocation (type) {
  return new Promise((resolve, reject) => {
    wx.getLocation({ type: type, success: resolve, fail: reject })
  })
}

//根据坐标获取城市名称
function getCityName (latitude = 39.90403, longitude = 116.407526) {
  var data = { location: `${latitude},${longitude}`, output: 'json', ak: '6473aa8cbc349933ed841467bf45e46b' };
  var url =  'https://api.map.baidu.com/'   'geocoder/v2/';
  var type = 'json';

  return this.get(url, data, type).then(res => res.result.addressComponent.city);
}

然后我们在app.js里面编写代码,在app运维的时候,动态获取城市称号、坐标音讯然后写入配置文件就能够,这里运用的要么Promise的函数调用达成。

const utils  = require('./comm/script/util.js')
const config = require('./comm/script/config.js')

App({
  onLaunch: function() { 
    utils.getLocation()
    .then(res=>{
      const { latitude, longitude } = res;
      config.location = `${longitude},${latitude}`;//当前坐标
      console.log(`currentLocation : ${config.location}`);

      return utils.getCityName(latitude, longitude)
    })
    .then(name=>{
        config.city = name.replace('市', ''); //当前城市名称
        console.log(`currentCity : ${config.city}`)
    })
    .catch(err => {
      config.city = '广州'
      console.error(err)
    })
  },
...

最终呈上改换过代码的运行分界面,照旧封存原来的职能平常使用。

澳门新萄京 16

如上便是本身对这几个小程序开始展览分化地点的调度思路和经验总结,希望大家全体收益或许提议,多谢阅读援助。 

 

四、使用地理地方接口动态获取当前都会称号和坐标

原来程序采用硬编码的方法设置当前都市,如下脚本所示

module.exports = {
    city: '杭州',
    count: 20
}

只是大家不一样地点的人口选取的时候,那一个城市称号分明必要更动的,由此能够利用微信的地理地点接口动态获取当前职责新闻,然后写入到安插文件之中就可以。

//获取当前位置信息
function getLocation (type) {
  return new Promise((resolve, reject) => {
    wx.getLocation({ type: type, success: resolve, fail: reject })
  })
}

//根据坐标获取城市名称
function getCityName (latitude = 39.90403, longitude = 116.407526) {
  var data = { location: `${latitude},${longitude}`, output: 'json', ak: '6473aa8cbc349933ed841467bf45e46b' };
  var url =  'https://api.map.baidu.com/'   'geocoder/v2/';
  var type = 'json';

  return this.get(url, data, type).then(res => res.result.addressComponent.city);
}

接下来大家在app.js里面编写代码,在app启动的时候,动态获取城市名称、坐标新闻然后写入配置文件就可以,这里运用的依然Promise的函数调用完成。

const utils  = require('./comm/script/util.js')
const config = require('./comm/script/config.js')

App({
  onLaunch: function() { 
    utils.getLocation()
    .then(res=>{
      const { latitude, longitude } = res;
      config.location = `${longitude},${latitude}`;//当前坐标
      console.log(`currentLocation : ${config.location}`);

      return utils.getCityName(latitude, longitude)
    })
    .then(name=>{
        config.city = name.replace('市', ''); //当前城市名称
        console.log(`currentCity : ${config.city}`)
    })
    .catch(err => {
      config.city = '广州'
      console.error(err)
    })
  },
...

最终呈上改换过代码的周转分界面,还是保留原来的坚守符合规律使用。

澳门新萄京 17

如上就是本身对这几个小程序开始展览分歧地点的调节思路和经验总括,希望大家全数受益也许提出,谢谢阅读辅助。

三、使用地理地方接口动态获取当前都市称号和坐标

澳门新萄京:基于Metronic的Bootstrap开发框架经验总结,微信小程序豆瓣电影项目的改造过程经验分享。原来程序接纳硬编码的主意设置当前都市,如下脚本所示

module.exports = {
    city: '杭州',
    count: 20
}

只是我们差异地点的人士利用的时候,那几个都市称号确定要求转换的,因而能够运用微信的地理地点接口动态获取当前地点新闻,然后写入到布署文件之中就能够。

//获取当前位置信息
function getLocation (type) {
  return new Promise((resolve, reject) => {
    wx.getLocation({ type: type, success: resolve, fail: reject })
  })
}

//根据坐标获取城市名称
function getCityName (latitude = 39.90403, longitude = 116.407526) {
  var data = { location: `${latitude},${longitude}`, output: 'json', ak: '6473aa8cbc349933ed841467bf45e46b' };
  var url =  'https://api.map.baidu.com/'   'geocoder/v2/';
  var type = 'json';

  return this.get(url, data, type).then(res => res.result.addressComponent.city);
}

下一场大家在app.js里面编写代码,在app运行的时候,动态获取城市名称、坐标消息然后写入配置文件就能够,这里运用的大概Promise的函数调用达成。

const utils  = require('./comm/script/util.js')
const config = require('./comm/script/config.js')

App({
  onLaunch: function() { 
    utils.getLocation()
    .then(res=>{
      const { latitude, longitude } = res;
      config.location = `${longitude},${latitude}`;//当前坐标
      console.log(`currentLocation : ${config.location}`);

      return utils.getCityName(latitude, longitude)
    })
    .then(name=>{
        config.city = name.replace('市', ''); //当前城市名称
        console.log(`currentCity : ${config.city}`)
    })
    .catch(err => {
      config.city = '广州'
      console.error(err)
    })
  },
...

最后呈上改变过代码的运作分界面,照旧保留原来的效应寻常使用。

澳门新萄京 18

澳门新萄京:基于Metronic的Bootstrap开发框架经验总结,微信小程序豆瓣电影项目的改造过程经验分享。以上正是笔者对那几个小程序进行分化方面包车型地铁调度思路和经验计算,希望大家有着受益只怕提出,感激阅读协理。 

 

只是大家一般还足以采纳录像组件的任何参数(借使须求的话),详细的注解能够参见地址:

为了贯彻动态的UKugaL的数量绑定,大家得以把有些变量放到贰个单身的文本中,也能够依照API接口动态获取。

譬如说笔者在2个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'},
 ],

然后还要定义多少个基础的ULANDL地址,如下所示。

video_base_url:https://www.iqidi.com/doc/Video/,

澳门新萄京 19

然后在页面包车型客车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;-->
<view class="container">
 <view class="goods-container">
  <view id="myVideo" class="goods-box" wx:for-items="{{videos}}" wx:key="{{index}}" data-id="{{item.id}}">
   <view class="goods-title">{{item.src}}</view>
   <video class="goods-video" id="{{item.id}}" src="{{video_base_url}}{{item.src}}" controls></video>
  </view>
 </view>
</view>

这么我们能够在开荒工具上收看摄像的来得了,而且也能够播放,然而喜剧的是不能发表在手提式有线电话机上来看录像,这些也是介绍使用腾讯摄像播放插件的缘故。

澳门新萄京 20

二、使用腾讯摄像插件播放摄像

既然如此大家无法直接播放自个儿服务器上的摄像,那么大家把它上传到腾讯录制服务器上搜求,并且利用腾讯录像的小程序插件来拍卖。

挂号3个腾讯摄像的账号,然后在客户端上上传本身的录制内容。

澳门新萄京 21

上传成功视频后,大家开采摄像播放,在右边手的录制新闻里面找到如下菜单

澳门新萄京 22

接下来查看网页音信,能够看来摄像的vid参数了。

澳门新萄京 23

腾讯录制插件正是使用那么些vid参数进行播报的。

在应用录制插件此前,大家先来介绍如何获取那个插件,小程序插件须要开垦者同意手艺博得使用权,大家能够在小程序的【设置 -> 第2方服务】里面看到相应的入口。

澳门新萄京 24

累加相应的插件,这里是腾讯录制,如下所示。

澳门新萄京 25

增加摄像后,可以赢得录制的APPID进行利用,如下是那些插件的音信。

澳门新萄京 26

合法的介绍和使用页面代码如下

澳门新萄京 27

只是使用那个小程序的插件依然须求按照小程序行使插件的多少个步骤,详细表明如下所示。

首先要求在app.json里面参与插件的宣示,如下所示。

澳门新萄京 28

在页面JS代码里面出席插件对象的定义,要是没有在本子里面使用录制插件,那么也足以不用那行代码

const txvContext = requirePlugin("tencentvideo");

在页面里面参加如下代码

<!--pages/Video/index.wxml-->
<!--1px = 750/320 = 2.34rpx;-->
<view class="container">
 <view class="goods-container">
  <view id="myVideo" class="goods-box" wx:for-items="{{videos}}" wx:key="{{index}}" data-id="{{item.id}}">
   <view class="goods-title">{{item.src}}</view>
   <txv-video class="goods-video" vid="{{item.vid}}" playerid="txv{{item.id}}" autoplay="{{false}}"></txv-video>
  </view>
 </view>
</view>

终极注意项目标调节和测试基础类库,选择比较新的,不然有的时候候太低版本推测开采工具都爱莫能助测试通过,作者便是忘记修改这里的基础库,导致一贯出错依旧尚未找到原因。

澳门新萄京 29

终极手提式有线电电话机上测试的效益如下所示,唯壹遗憾的就是种种摄像都要播放一段广告,郁闷。

澳门新萄京 30

由此看来,使用小程序插件依然这一个方便轻便的,可是第二遍采纳总是有一点点碰到一些标题,稳步习贯就好了。

还会有腾讯录像放在腾讯服务器,也可以减轻本身服务器的访问压力,还是能够享受给别的朋友,也是很好的。

上述便是本文的全体内容,希望对大家的学习抱有援助,也冀望大家多多协理脚本之家。

您大概感兴趣的篇章:

  • 微信小程序数字滚动插件使用详解
  • 微信小程序支付之toast提醒插件使用示例
  • 微信小程序图表插件(wx-charts)实例代码

本文由澳门新萄京发布于澳门新萄京最大平台,转载请注明出处:澳门新萄京:基于Metronic的Bootstrap开发框架经验总

上一篇:澳门新萄京Vue怎么样实现响应式系统,vue完成轻 下一篇:没有了
猜你喜欢
热门排行
精彩图文