澳门威利斯人_威利斯人娱乐「手机版」

来自 网络资讯 2019-07-28 04:26 的文章
当前位置: 澳门威利斯人 > 网络资讯 > 正文

在小程序中使用腾讯视频插件播放教程视频的方

在我们开采的多个小程序里面,为了给客户询问部分学科内容,大家必要扩大一个在线播放录像的模块,思索过直接行使录制组件播放服务器上的摄像不成事,由此选用Tencent视频插件来播音最后测量试验成功。本篇小说介绍微信小程序采用录制组件和Tencent摄像插件二种方法的缓慢解决方法,并珍视介绍摄像插件情势的管理进程。

在学习微信小程序支付进程中,一部分的困难是后面一个逻辑的管理,也正是对后面一个JS的代码编辑;一部分的难题是前面二个分界面包车型客车统一筹算显得;本篇小说基于四个豆类电影接口的小程序开源项目开始展览重复调节,把内部碰着的连锁难点和修正的地点开始展览商讨介绍,希望给大家提供三个参照的思绪,本篇小说是依赖前人小程序的品类基础上开始展览的改进,由此在开篇在此之前率先对原来的文章者的费劲致敬及谢谢。

在攻读微信小程序开辟进度中,一部分的困难是前边叁个逻辑的拍卖,约等于对前面四个JS的代码编辑;一部分的难点是前面三个分界面包车型地铁规划显得;本篇小说基于一个豆类电影接口的小程序开源项目开始展览重复调解,把个中遭受的连带难题和改革的地方开始展览座谈介绍,希望给我们提供二个参考的笔触,本篇小说是遵照前人小程序的类型基础上开展的改良,由此在开始比赛从前率先对原来的小说者的劳累致敬及谢谢。

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

1、豆瓣电影接口的小程序项目境况

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

图片 1

在GitHub的开源Curry面,能够查找到众多关于豆瓣电影接口的小程序,我本篇小说是基于 weapp-douban-movie 这些小程序举行的改建管理,后来找到了原文者的类别地址:wechat-weapp-movie,原来的著小编对版本做了三遍进级,后来本人相比较笔者的调动和小编最新版本的源码,开掘有个别地点改换的思绪有一点近乎,如对于U传祺L地址外放到联合的布署文件中的管理,但是依然有广大地点改变不一样。

本篇随笔的改建方案是依赖小程序项目 weapp-douban-movie 的,因而对待的代码也是和那些实行比较,不领悟那一个本子是还是不是原文者的旧版本,可是那个版本对文件目录的分别已经显得至极干净利落了,对影片音信的展现也联合到了模版里面,进行再三的双重利用,全部的布局和代码都做的比较好,看得出是花了累累功力实行规整优化的了。

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

图片 2

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

图片 3

唯独各类人都有两样的经验和观念,对于开拓小程序来讲,作者尊重于采纳布署文件缩短硬编码的常量,使用Promise来优化JS代码的运用,将得到和付出JSON数据的主意封装到补助类,以及选取地理地方接口动态获取当前城市名称和坐标等等。

本篇小说上边包车型客车片段就是介绍使用那一个内容张开代码优化的管理进程。

1、豆瓣电影接口的小程序项目意况

豆类电影接口提供了非常多皮之不存毛将焉附的接口给我们选拔,豆瓣电影接口的API地址如下所示:https://developers.douban.com/wiki/?title=movie_v2

图片 4

在GitHub的开源Curry面,能够搜寻到无数关于豆瓣电影接口的小程序,小编本篇随笔是依据 weapp-douban-movie 那些小程序进行的改建管理,后来找到了原来的小说者的类别地址:wechat-weapp-movie,最初的著作者对版本做了二回升高,后来本人相比小编的调动和小编最新版本的源码,发掘有一点位置退换的笔触有一点点近乎,如对于UTiggoL地址外放到联合的配置文件中的管理,可是依旧有很多地点改换分化。
本篇小说的改建方案是基于小程序项目 weapp-douban-movie 的,由此对待的代码也是和那么些举行相比,不知晓那些本子是否原著者的旧版本,可是那个版本对文件目录的界别已经展现十一分干净利落了,对影视音信的彰显也合併到了模版里面,实行频仍的重复利用,全部的布局和代码都做的相比较好,看得出是花了累累武术实行规整优化的了。
小程序主分界面效果如下所示:

图片 5

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

图片 6

而是各个人都有分裂的经历和见解,对于开采小程序来讲,笔者尊重于接纳布置文件降低硬编码的常量,使用Promise来优化JS代码的行使,将猎取和付出JSON数据的办法封装到扶助类,以及选用地理地方接口动态获取当前都市名称和坐标等等。
本篇小说下边包车型地铁片段正是介绍使用这一个剧情开始展览代码优化的管理进度。

出于是大家友好录像的摄像内容,本来想向来通过录制组件来播音自个儿服务器上的摄像,理想很丰硕,现实很骨感,不知底是录制之中十分的大的来由大概Tencent不准,纵然在开采工具上测量检验的时候能够播放,可是最终揭露测量试验的时候不能够播放录制,但是这里也顺手介绍一下基于录像组件的播音管理格局吧。

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

我们在利用任何代码开荒顺序的时候,我们都以特别注意一些变量或常量的施用,借使能够联合定义那就联合定义好了,这种在小程序的JS代码里面也是同样,大家尽量收取一些如U如虎 CTR 3L,固定参数等音信到独门的配备文件中,那样在JS代码引进文件,使用变量来替代

诸如原本的config.js文件之中,只是概念了几个地址和页面数量的大大小小常量,如下所示

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

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

图片 7

任何页面JS代码也和那么些看似,底部依然有那个好像那样ULX570L地址,那个是自家期待统一到config.js文件的地点,别的那些调用的函数是接纳回调函数的管理格局,如下所示。

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

其实本人以为这之中既然是概念的外界函数,那么那其中的url, city, config.city, config.cout都无需这里,在封装函数内部选取那几个常量就能够,因而得以对他们举办改建,如下大家联合收取种种文件之中的UXC60L,以及一些广泛变量到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里面,小编联合抽出了逐条页面包车型客车UPAJEROL地址、关键词和标签(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、使用布署文件定义常量内容

咱俩在接纳任何代码开辟顺序的时候,大家都以特别注意一些变量或常量的运用,假如能够联合定义那就集结定义好了,这种在小程序的JS代码里面也是均等,大家尽量抽出一些如URAV4L,固定参数等音讯到独门的铺排文件中,那样在JS代码引进文件,使用变量来代表
举个例子说原本的config.js文件之中,只是概念了三个地点和页面数量的大大小小常量,如下所示

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

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

图片 8

任何页面JS代码也和这些看似,底部还是有非常多近似那样UTiguanL地址,那么些是自家愿意统一到config.js文件的地方,别的这一个调用的函数是选择回调函数的管理情势,如下所示。

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

实在自个儿感觉那其间既然是概念的表面函数,那么这里面的url, city, config.city, config.cout都无需这里,在封装函数内部接纳这个常量就可以,因而得以对她们举行改建,如下大家归总收取各样文件之中的ULANDL,以及一些周围变量到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宝马7系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)

简化的固然十分少,但是尽量的维持到底不难的接口是大家的对象,并且这里把例行的URAV4L等参数提取到函数里面,尤其切合大家编码的习于旧贯。
此地定义的**douban.fetchComming(that, that.data.start) **接纳了Promise来简化代码,传入的that参数是因为需求在函数体里面安装该页面里面包车型地铁Data等处理。
有关Promise的相干处理,大家在底下进行介绍。

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

2、使用Promise来优化JS代码

至于Promise的补益和如何行使Promise插件介绍,笔者在随笔《在微信小程序的JS脚本中选拔Promise来优化函数管理》中已有介绍,笔者很垂怜使用这种Promise的风骨代码,况且能够定义一些常用的协理类来增加代码的选定。在笔者参照他事他说加以考察的那几个豆瓣电影小程序照旧使用正规回调的函数,相比原著者最新版本的 wechat-weapp-movie 小程序,也依旧使用回调函数情势来拍卖,有一点诡异为啥不引进Promise插件来开采。

本来的小程序,电影接口的连带管理,统一在fetch.js里面进行拍卖,这里封装对各个豆瓣API接口的调用。

图片 9

此间大家来探视原本程序尚未采用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接口的调用。

图片 10

此地大家来会见原本程序尚未行使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)
    })
  },
...

最后呈上退换过代码的周转分界面,仍然封存原本的坚守符合规律使用。

图片 11

上述就是本身对这些小程序举办区别地点的调节思路和经验计算,希望大家享有收益恐怕提出,多谢阅读帮助。 

 

4、使用地理地点接口动态获取当前城市称号和坐标

原本程序选择硬编码的秘诀设置当前都会,如下脚本所示

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)
    })
  },
...

最终呈上改变过代码的运维分界面,依旧封存原本的功效寻常使用。

图片 12

以上就是自个儿对这么些小程序进行差别地点的调解思路和经验计算,希望大家全体收益或然提出,多谢阅读支持。

而是大家一般还足以行使录像组件的任何参数(假若必要的话),详细的求证能够参见地址:

为了兑现动态的U福睿斯L的多寡绑定,大家得以把一些变量放到三个单身的文件中,也能够依据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'},
 ],

接下来还要定义二个基础的ULacrosseL地址,如下所示。

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

图片 13

然后在页面包车型客车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>

如此大家可以在开辟工具上观看录像的显得了,并且也能够播放,然则喜剧的是无法发布在手提式有线话机上见到录制,那几个也是介绍使用Tencent录像播放插件的原故。

本文由澳门威利斯人发布于网络资讯,转载请注明出处:在小程序中使用腾讯视频插件播放教程视频的方

关键词: 澳门威利斯人 微信小程