精华内容
下载资源
问答
  • 由于是api中的url是跳转到第三方网址的,目前微信小程序暂不支持外链的跳转,另外也没有先webview的东西存在,当然iframe也不能用,希望后续 微信小程序能提供这样的类似功能 后续 将福利改成瀑布流的展示方式 支持...
  • 因为需要有播放视频的需求,所以小程序的官方组件 rich-text就不能用...首先在html2json.js文件中支持iframe的转化,因为小程序默认就不支持iframe所以在源码中并没有iframe的转化,需要我们自己添加 可以看到之前...

     

    因为需要有播放视频的需求,所以小程序的官方组件 rich-text就不能用。所以只能使用wxparse,但是即便是wxparse本身也是不支持iframe标签的。

    修改wxparse的源码过程:

    1.支持iframe的转化

    首先在html2json.js文件中支持iframe的转化,因为小程序默认就不支持iframe所以在源码中并没有iframe的转化,需要我们自己添加

    可以看到之前源码对于img标签的处理,我们就照猫画虎对于iframe进行处理

    并取出有效的vid以便之后的程序视频插件使用。

    html2json.js文件修改:

    function html2json(html, bindName) {
       
        HTMLParser(html, {
            start: function (tag, attrs, unary) {
               ...
    
    
                //对img添加额外数据
                if (node.tag === 'img') {
                    node.imgIndex = results.images.length;
                    var imgUrl = node.attr.src;
                    if(!imgUrl) {
                      return
                    }
                    if (imgUrl[0] == '') {
                        imgUrl.splice(0, 1);
                    }
                    imgUrl = wxDiscode.urlToHttpUrl(imgUrl, __placeImgeUrlHttps);
                    node.attr.src = imgUrl;
                    node.from = bindName;
                    results.images.push(node);
                    results.imageUrls.push(imgUrl);
                }
    
    
               // 下面是需要我们添加的代码
                // 处理iframe的地址,取出vid并放入数据中,
                if(node.tag === 'iframe') {
                    // safeGetValue 只是一个取值的函数,可自行编写自己的取值函数。
                    node.vid = safeGetValue([1], node.attr.src.match(/https:\/\/v\.qq\.com.*vid=(\w*)/))
                }
    
            .....
    };
    
    // 此函数作用类似于ramda的path和pathOr,用于安全取值。
    
    function safeGetValue() {
      const argsLength = arguments.length
    
      if (argsLength !== 2 && argsLength !== 3) {
        throw '必须为两个或者三个参数'
      }
    
      var defaultValue
    
      if (argsLength === 3) {
        var [_defaultValue, keys, item] = arguments
        defaultValue = _defaultValue
      } else {
        var [keys, item] = arguments
      }
    
    
      if (!Array.isArray(keys)) {
        throw '参数有误,取值的keys必须为数组'
      }
    
      try {
        keys.forEach(key => {
          item = item[key]
        })
      } catch (e) {
        return defaultValue
      }
      
      return item
    }
    
    

    2.在wxParse.wxml添加腾讯视频插件的模板

    在html2json中保存的vid属性,在这时有了用处

    <template name="wxPraseIframe2TencentVideoPlugin">
      <view style="margin: 20rpx 0">
        <txv-video
          width="100%"
          height="600rpx"
          playerid="txv1"
          vid="{{item.vid}}"
          autoplay="{{false}}"
        >
        </txv-video>
      </view>
    </template>
    
    
    

    3.修改wxParse.wxml的循环模板,添加视频插件的模板

    中间的腾讯视频插件正是我们需要添加的。

    ps: 循环模板在源码中有10个,甚至更多,所以需要我们把每一个循环模板中都添加插件,也就是说在wxParse1-11中都要添加,这样才能保证你的视频能够正常播放。

    <template name="wxParse0">
    
     <!--video类型-->
        <block wx:elif="{{item.tag == 'video'}}">
          <template is="wxParseVideo" data="{{item}}" />
        </block>
    
       <!--腾讯视频插件-->
        <block wx:elif="{{item.tag == 'iframe'}}">
          <template is="wxPraseIframe2TencentVideoPlugin" data="{{item}}" />
        </block>
    
        <!--img类型-->
        <block wx:elif="{{item.tag == 'img'}}">
          <template is="wxParseImg" data="{{item}}" />
        </block>
    
    
    </template>
    
    
    
    

    3.添加腾讯视频插件

    https://mp.weixin.qq.com/

    添加后里面设置小程序源码

     

    到此结束 就可以打开了

    tips:如果一个页面有好几个视频,则需要把第二步中 playerid的值改成当前页面唯一值,可以用视频的vid

     

    展开全文
  • 主要介绍了微信小程序 wxParse插件显示视频问题,文中给大家提到了微信小程序插件wxParse的使用,需要的朋友可以参考下
  • 前些日子,公司让我部署一下微信小程序,自己之前从来没有研究过微信小程序,所以一开始不知道如何部署,可以说是一个纯正小白了!于是我就先去百度大概了解一下微信小程序,然后后面又看官方文档,心里就不再那么...

    前言

    前些日子,公司让我部署一下微信小程序,自己之前从来没有研究过微信小程序,所以一开始不知道如何部署,可以说是一个纯正小白了!于是我就先去百度大概了解一下微信小程序,然后后面又看官方文档,心里就不再那么恐惧了。之前有了解过微信公众号的开发,后面才知道原来微信官方有专门的一键生成的应用,不是编程的人也可以轻松学会微信公众号。
    但微信小程序有所不同了,它目前还是比较麻烦的,官方是没有模板的,是属于有着自己的后台的,所以微信小程序的内容需要自己设计和开发。一系列操作完成之后是利用小程序后台进行发布。
    简要说明它的一个步骤:
    1.在https://mp.weixin.qq.com/.申请注册微信小程序

    2.申请成功后,在小程序后台设置微信小程序内容

    3.内容设置完成后,利用微信开发工具进行微信小程序开发

    4.开发成功后,利用微信开发工具将代码上传到微信小程序后台

    5.上传成功后,在小程序后台进行提交小程序审核

    6.审核成功后,在小程序后台进行提交小程序上线

    7.上线成功后,就可以在微信相关搜索栏看见啦(一般需要等几分钟)

    以下,将详细介绍我了解小程序的过程!

    一、微信小程序的申请注册

    1.打开微信公众平台官网首页(mp.weixin.qq.com),点击小程序进入
    在这里插入图片描述
    2.点击进去后,鼠标下滑看到此内容,可以认真看一下接入流程,大概的一个微信小程序内容设置就这些
    在这里插入图片描述
    3.进行微信小程序信息登记,注册成功后返回首页https://mp.weixin.qq.com/登录
    (注:关于小程序注册的账号类型可以参考微信官方说的具体区别)
    在这里插入图片描述

    二、微信小程序的内容设置

    首先,到微信公众平台官网首页进行小程序后台的登录,然后进行内容设置

    1.基本信息设置

    找到微信小程序后台的 设置 选项,点击得到以下画面
    在这里插入图片描述

    2.开发设置

    找到开发–>开发工具–>选择选项卡为 开发设置 进行服务器域名和业务域名的配置
    在这里插入图片描述

    关于微信小程序中服务器域名和业务域名的区别

    (1)服务器域名:就是去请求后端数据的域名
    就是企业在申请域名时对应绑定的服务器,比如XX公司在阿里云上申请了一个域名,那么阿里云会要求关于绑定的服务器是哪一个,然后这个服务器的HTTPS访问路径就是这个域名。

    微信小程序不支持HTTP协议,而Tomcat的默认地址是HTTP协议的,如果要改成HTTPS访问的协议,需要自行修改!
    有关Tomcat配置 https SSL证书可以参考该文章:https://www.cnblogs.com/cx-code/p/10059109.html.

    (2)业务域名:是小程序框架里其他H5地址的URL的域名或者网页里面的iframe的域名
    校验直接这样填写就OK
    在这里插入图片描述

    业务域名配置成功最容易忽略的2点:
    A、新备案的域名必须超过24个小时后才可以填写到业务域名下
    B、校验文件必须放置服务器启动的根目录下,就像这样https://服务器域名/hwcLEi6Ok1.txt能访问成功才可以配置不出错
    在这里插入图片描述

    三、微信开发者工具的下载

    下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html.

    个人觉得稳定版的好些!根据需要选择下载后一路安装直到成功即可
    在这里插入图片描述

    四、微信小程序前端框架的搭建/开发/上传/发布

    1、搭建(新建)微信小程序框架

    使用云服务和不使用云服务的区别

    云服务:
    现微信官方推出了云开发,对于云开发的话我认为前端开发工程师比较适合这个,主要就是方便了前端开发工程师,如果想要具体了解云开发的概念的话,可以看看该作者文章,非常详细。
    链接:https://blog.csdn.net/weixin_42949808/article/details/107287606.
    不使用云服务:
    微信小程序的结构简单些,便于理解,没有包含云服务那么多复杂的东西,个人觉得不是专门的前端开发工程师,只是部署的话,那么采用这个就足够了

    以下采用的是不使用云服务的小程序结构:
    (1)、创建小程序
    1.1 前往微信小程序后台–>设置—>鼠标下滑可以看到账户信息,复制AppID
    在这里插入图片描述
    1.2 到微信开发者工具创建小程序
    注意:一定要选择 不使用云服务 这一选项
    在这里插入图片描述
    1.3 创建成功后,微信小程序应出现的结构
    在这里插入图片描述

    微信小程序代码结构说明

    在这里插入图片描述

    2、开发微信小程序

    小程序代码开发框架类型

    a.微信官方组件
    b.其他前端框架或者页面
    c.利用第三方工具生成(一般是收费的)

    微信小程序开发框架选择

    本公司前端小姐姐采用的是b方式,用的是普通的HTML页面设计小程序,然后再利用微信开发者工具中建立好的微信小程序框架进行H5地址引用,于是小程序就算搭建好了
    注意:微信小程序后台要已经配置了服务器地址,因为HTML写的页面是打包放在服务器上的Tomcat目录上的,只是利用了微信小程序框架进行了H5地址引用
    简单如下操作:
    在这里插入图片描述
    该配置参考的链接是:https://blog.csdn.net/jlq_diligence/article/details/84129034.

    3、上传微信小程序到微信小程序后台

    (1).检查AppID,核对是否和小程序后台的一样,不一样就修改一下
    在这里插入图片描述
    (2).把以下去掉勾,微信小程序在刚刚调试阶段的时候,可能有些域名会不合法,去掉为了避免不必要的麻烦
    在这里插入图片描述
    (3).上传微信小程序到微信小程序后台
    在这里插入图片描述

    这里是因为之前提交过一次,所以有更新类型的选项。
    在这里插入图片描述
    (4)、上传后,到小程序后台查看上传版本
    审核成功后,可以选择不先进行线上发布,选择体验版进行体验,点击体验版会有一个体验二维码,该二维码只能微信小程序后台中已添加的体验者使用和查看
    在这里插入图片描述

    如何添加体验者

    如图操作
    在这里插入图片描述

    4、线上发布

    审核成功后,需要再到小程序的后台来进行人工线上发布,发布成功后会到线上版本那一栏
    在这里插入图片描述

    五、资料大集合

    入门微信小程序开发视频:
    https://www.imooc.com/learn/974.

    从零开始:微信小程序新手入门宝典(里面有的知识较老)
    http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1989.

    微信小程序解决方案专辑
    http://www.wxapp-union.com/special/solution.html.

    微信小程序Demo:小程序增删改,登录,注册,图片上传
    http://www.wxapp-union.com/forum.php?mod=viewthread&tid=13040.
    学习小程序的网站推荐
    http://www.wxapp-union.com/portal.php.

    1


    1. 编写不易,如果有帮助到的话,可以关注,点赞和收藏哦~ ↩︎

    展开全文
  • 微信小程序内嵌网页链接

    千次阅读 2019-03-20 16:51:27
    微信小程序内嵌网页链接 微信小程序和浏览器的环境不同,微信小程序中的所有外部连接都必须部署业务域名成功后才能实现跳转访问 不管是a标签的超链接,还是iframe等等都需要在微信公众平台部署业务域名才可访问 ...

    微信小程序内嵌网页链接

    微信小程序和浏览器的环境不同,微信小程序中的所有外部连接都必须部署业务域名成功后才能实现跳转访问

    不管是a标签的超链接,还是iframe等等都需要在微信公众平台部署业务域名才可访问

    若是内嵌微信公众号文章的话则不需要部署,但需要关联微信公众号

    需要提前注意几点:
    1.个人和海外类型的小程序暂不支持使用!
    2.使用微信官方组件web-view,此组件会覆盖页面中所有其他组件,铺满整个小程序页面,除了小程序原生的tabbar
    3.部署业务域名时要求使用的是https
    4.部署业务域名时要求业务域名需经过ICP备案,若是海外域名则无法部署
    使用微信官方组件web-view:
    在这里插入图片描述

    下面来介绍具体步骤:

    内嵌公众号文章

    要求:公众号文章需与小程序需关联

    1.关联公众号

    在这里插入图片描述

    2.使用web-view嵌入公众号文章

    < !-- html -->
     <!-- 指向关联的公众号文章的地址 -->
    <web-view src="https://XXXXXXXXXXXX/"></web-view>
    

    内嵌外部网页

    1.下载部署校验文件

    登陆微信开放平台小程序页面,在“业务域名”中添加,如下图 :
    在这里插入图片描述在这里插入图片描述
    在此下载校验文件,并将校验文件放入指定位置:

    1.业务域名需经过ICP备案,新备案域名需24小时后才可配置。域名格式只支持英文大小写字母、数字及“- ”,不支持IP地址。配置业务域名后,可打开任意合法的子域名。
    2.将文件放置在域名根目录下,例如wx.qq.com,并确保可以访问该文件。
    例如如果想保存的业务为https://test.com/,下载下来的校验文件为AbC.txt,则需要确保https://test.com/AbC.txt能够访问。

    2.添加业务域名

    校验文件部署成功后在此添加业务域名

    注意几点:

    1.业务域名是不需要加前面的https://的
    2.业务域名须填写根域名,例如:如果下载下来的校验文件为AbC.txt,并且https://test.com/AbC.txt能够访问 那么只需填写test.com

    在这里插入图片描述
    目前不少开发者在设置业务域名时,发现检查校验文件失败,可先按照如下步骤进行自查:

    1.业务域名需经过ICP备案,新备案域名需24小时后才可配置。域名格式只支持英文大小写字母、数字及“- ”,不支持IP地址。配置业务域名后,可打开任意合法的子域名。
    2.将文件放置在域名根目录下,例如wx.qq.com,并确保可以访问该文件。
    例如如果想保存的业务为https://test.com/,下载下来的校验文件为AbC.txt,则需要确保https://test.com/AbC.txt能够访问。
    3.校验文件内容错误。校验文件内容一般是非HTML数据,如果下载下来的校验文件内容为HTML数据,一般为登录态过期。请重新登录小程序下载校验文件。
    4.使用4G网络尝试访问链接,确认自身服务器没有拦截请求(常见于设置了白名单或者防火墙的服务器,需开发者自行确认下)
    5.https证书过期。请确保https证书处于有效期内。
    6.使用curl 测试链接,确保curl能够正常访问链接,且curl出来的内容为校验文件内容。
    7.使用time curl https://test.com/abc.txt查看链接时间,建议耗时在1s之内。
    8.请确保url中的文件名与下载下来的文件名大小写一致。如下载的文件是AbC.txt,确保url是https://test.com/AbC.txt,不能是https://test.com/abc.txt
    9.部分用户的服务器配置较陈旧,安全性差(如配置 768位 的 DH),为了保证通信安全,微信后台不支持,请更新服务器配置。
    (1)通过https://cloud.tencent.com/product/tools#userDefined12,检测网址是否支持TLS1.2。
    (2)可通过工具 https://www.ssllabs.com/ssltest/analyze.html 检查自己的服务器,对该工具标红的各项漏洞逐项修补,建议更新配置直到该工具打分为 C及以上 。
    10. 如上述检查都没有问题,请重新下载校验文件重试,确保上传到服务器的文件内容与新下载的文件内容一致。

    3.使用web-view嵌入外部链接

    <!-- html -->
    <!-- 指向嵌入外部链接的地址 -->
    <web-view src="https://XXXXXXXXXXXX/"></web-view>
    

    关闭校验

    最后,如果想暂时预览效果,可在开发者工具中设置关闭校验
    在这里插入图片描述在这里插入图片描述

    展开全文
  • 摩拜单车小程序已于微信小程序上线第一天正式发布,刷爆微博媒体朋友圈。本文主要讲讲技术方向的总结,在段时间的开发周期内内如何一步步从学习到进阶。 思维转变   微信小程序没有HTML的常用标签,而是类似React的...
  • 微信小程序

    2020-07-22 16:17:30
    微信小程序开发 对比 与微信网页:微信网页给 微信提供的是 URL,小程序给微信提供的是 源代码;微信给小程序提供了框架、组件、更多Native能力的API;小程序需要审核才能上线;小程序被收藏后有更多入口; 与MVVM...

    微信小程序开发
    对比

    与微信网页:微信网页 给 微信提供的是 URL,小程序给微信提供的是 源代码;微信给小程序提供了框架、组件、更多Native能力的API;小程序需要审核才能上线;小程序被收藏后有更多入口;

    与MVVM:page 接近于 vue 的单文件组件,模板、样式、脚本完全分离,模板采用xml;检查模型变化的方式 this.setData() 接近于 react 的 this.setState()

    代码示例
    1、获取用户信息(昵称、头像、性别、省市县)

    <template>
    		<button open-type="getUserInfo" @getuserinfo="getUserInfoHandle" 
    v-show="!userInfoAuth">获取用户信息</button>
    </template>
     
    <script>
    	export default {
    		data() {
    			return {
    				userInfoAuth: false,
                    userInfo: {}
    			}
    		},
    		onLoad() {
    			this.getSetting();
    		},
    		methods: {
                // 查看已有权限
    			getSetting() {
    				wx.getSetting({
    					success: (res) => {
    						let authSetting = res.authSetting;
    						if (authSetting['scope.userInfo']) {
    							this.getUserInfo();  
    						}
    					}
    				})
    			},
                // 已授权,直接接调用wx.getUserInfo()得到userInfo
    			getUserInfo() {
    				wx.getUserInfo({
    					success: (res) => {
    						this.analysisUserInfo(res.userInfo);
    					}
    				})
    			},
                // 未授权,使用<button>获得授权,并得到userInfo
    			getUserInfoHandle(event) {     
    				let userInfo = event.detail.userInfo;
    				if (userInfo) {
    					this.analysisUserInfo(userInfo);
    				}
    			},
    			analysisUserInfo(userInfo) {
    				this.userInfoAuth = true;
                    this.userInfo = userInfo;
    			}
    		}
    	}
    </script>

    2、登录(获取openId,session_key、unionid)

    	export default {
    		onLoad() {
    			this.checkSession();
    		},
    		methods: {
    // 检查会话是否有效,即上次login得到的session_key(由后端从微信服务器获取)是否还有效
    			checkSession() {
    				wx.checkSession({
    					success: ()=>{
    						this.fetchMe();
    					},
    					fail: () => {
    						this.login();
    					}
    				})
    			},
    // 检查会话是否还有效
    			fetchMe(){
    				wx.request({
    					url: 'https://test.com/me',
                        success:(res)=>{
    						console.log(res.data)
    					},
    					fail:(res)=> {
    						this.login();
    					}
    				})
    			},
    			login() {
    				wx.login({
    					success:(res)=> {
    						if (res.code) {
    							this.loginServer(res.code);
    						}
    					}
    				})
    			},
    			loginServer(code){
    				wx.request({
    					url: 'https://test.com/login',
    					data: {
    						code
    					},
    					success(res) {
    						console.log(res.data)  // 用户已授权登录 微信开放平台同账号下的 公众号或移动应用 才会有 unionid
    					}
    				})
    			}
    		}
    	}

    3、获取手机号

    前提:已登录

    <template>
    	<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</button>
    </template>
     
    <script>
    	export default {
    		methods: {
    			getPhoneNumber(e) {
                    // 得到加密过的数据
    				if (e.detail.iv && e.detail.encryptedData) {
    					this.getPhoneNumberFromServer(e.detail);
    				}
    			},
                // 发给后端解密,后端拿session_key去微信服务器解密
    			getPhoneNumberFromServer(detail) {
    				wx.request({
    					url: 'https://test.com/phone',
    					data: {
    						iv: detail.iv,
    						encryptedData: detail.encryptedData
    					},
    					success(res) {
    						console.log(res.data)
    					}
    				})
    			}
    		}
    	}
    </script>

    4、获取unionId

    前提:微信开放平台上绑定了小程序,已经调用过wx.login(),后端已存有session_key

    			getEncryptedData() {
    				uni.getUserInfo({
    					withCredentials: true,
    					success: (res) => {
    						this.decryptUnionId(res);  // 将加密数据传给后端解密
    					}
    				})
    			},
    			decryptUnionId(detail) {
    				this.request({
    					url: '/user/encrypted-data',
    					method: 'PUT',
    					data: {
    						signature: detail.signature,
    						rawData: detail.rawData,
    						iv: detail.iv,
    						encryptedData: detail.encryptedData
    					},
    					success: (res) => {
    						res = res.data;
    						if (res.code === 0) {
    							this.globalData.$store.state.me.unionId = res.data;
    							this.globalData.$store.commit("change");
    						} else {
    							this.showToast(res.msg || '获取失败');
    						}
    					}
    				})
    			}

    5、登录与获取用户信息的结合


    0、用户进入小程序时,有16种情况:有没有getUserInfo权限 2 * 我方服务器有没有记录这个用户 2 * 有没有登录我方服务器 2 * 有没有登录微信服务器 

    1、虽然登录与获取用户信息可以分离,但是可以设计成 获取用户信息 是登录的前提,从而能采集一些用户信息;具体来说是,用户触发 getUserInfo 按钮 后再 wx.login(),并把用户信息保存到后端

    2、用户触发过 getUserInfo 按钮,即可奖获取的信息保存到后端,但是有必要获取用户最新的信息,因此可以设计成每次登录都触发 getUserInfo

    3、第一次获取用户信息 只能是 getUserInfo 按钮,之后可以是 wx.getUserInfo,可以设计成 任何情况都是 getUserInfo 按钮,从而不用区分两种情况

    4、有getUserInfo权限的情况下,使用getUserInfo 按钮,不会弹出授权框,但能正常回调;因此,在显式登录的场景中,(type为getUserInfo的登录按钮 + wx.login) 不会比 (登录按钮 + wx.getUserInfo + wx.login)给用户带来更多负担;因此,在显式登录的场景中,无需判断是否有getUserInfo权限,统统使用getUserInfo 按钮

    5、不在code2Session时获取unionId,因为此时往往没有unionId;可用在登录我方服务器后判断是否已存有unionId,没有的话再调用wx.getUserInfo({withCredentials: true})获取加密数据,发给后端解密出unionId(前提是 微信开放平台上绑定了小程序)

    6、登录功能可以设计成一个抽屉,能被各处调用

    总结:

    方案一:不要自动wx.login(),用户要进行登录后才能有的操作时,弹出登录抽屉,抽屉里放置getUserInfo 按钮;用户触发getUserInfo 按钮后,再调用wx.login(),并将最新的用户信息保存到后端;缺点,用户每次都要显式的登录

    方案二:先用wx.getSetting判断有没有getUserInfo权限,有的话,自动wx.getUserInfo并wx.login,并将最新的用户信息保存到后端;还没有getUserInfo权限的话,再按方案一

    场景一:在有退出功能的小程序中,不能自动wx.login(),需要显式的登录,此场景采用方案一

    6、登录与获取手机号的结合

    需求:获取用户手机号即登录

    0、获取手机号之前必须先wx.login,且后端存有session_key

    1、只有一个按钮获取手机号的话,那么得不到getUserInfo权限,但是可以通过<open-data>显示用户基本信息

    方案

    1、刚进入小程序就自动wx.login(),并登录我方服务器,如果已有phoneNumber,则返回给前端,如果没有phoneNumber,当作未登录
    2、未登录的情况下,用户要进行登录后才能有的操作时,弹出登录抽屉,抽屉里放置getPhoneNumber 按钮,用户触发getPhoneNumber 按钮后,调用敏感数据解密接口,得到phoneNumber

    3、用<open-data>显示用户基本信息

    7、Cookie


    小程序不支持cookie机制,但可以读取响应头的Set-Cookie,有Storage机制。

    可以用现成的组件使得小程序支持cookie:https://github.com/charleslo1/weapp-cookie

    8、canvas

    获取CanvasContext实例的三中方法:

    <canvas canvas-id="poster-canvas" />
    let ctx = wx.createCanvasContext('poster-canvas')
    <canvas type="2d" class="poster-canvas" />
    wx.createSelectorQuery().in(this).select('.poster-canvas').context((res)=>{
      let ctx = res.context;
    }).exec();
    let canvas = wx.createOffscreenCanvas();
    let ctx = canvas.getContext('webgl');  // 离屏canvas 目前只支持 webgl

    9、<web-view>打开第三方网页

    问题:需要配置域名白名单,iframe 引用的域名也需要

    方案1:在 nginx 中配置代理,将请求转发到第三方;缺点:会受防盗链限制

    location / {
    	proxy_pass https://www.目标.com;
    	proxy_set_header Referer '';      # 清除Referer,冲破防盗链
    	proxy_set_header Accept-Encoding "";  # 避免 gzip压缩,使得sub_filter能正常进行
    
        sub_filter_once off;
        sub_filter '第三方域名.com' 'www.我方域名.cn'; # 替换,让对第三方资源的请求都改成对我方的请求,我方转发时 改造 Referer 等字段,已规避 第三方的 防盗链机制
    }

    方案2:小程序关联的公众号网页中嵌入ifram(待试)

    10、自定义TabBar

    1、参考官方文档的示例代码

    2、修改 path 和 icon 路径,注意有没有前面的 /

    3、在TabBar组件中切换页面

        switchTab(e) {
          const data = e.currentTarget.dataset
          wx.switchTab({url: data.path})
        }

    4、由于每个Tab页都有各自的TabBar组件实例,因此在TabBar组件中无法知道当前实例属于哪个Tab页,因此在Tab页中告知TabBar组件实例其所在的index

    		created(){
    			this.getTabBar().setData({  // 在uni-app中要写成 this.$mp.page.getTabBar()
    			  selected: 1  // selected初始值可以设置为 -1,避免一开始就有菜单被选中
    			})
    		}

    11、iPhoneX 底部横条避让

    const model = wx.getSystemInfoSync().model;
    this.setData({
    			isIphoneX: /iphone\sx/i.test(model) || /iphone\s1/i.test(model) || (/iphone/i.test(model) && /unknown/i.test(model) && !/8/.test(model))
    		});

    12、注意事项

    IOS 不支持 webp 图片

    IOS 抖音小程序 不支持引用网络字体文件,需要把字体文件放到项目中

    展开全文
  • 微信小程序介绍

    千次阅读 2019-11-15 11:34:17
    最近在做一个微信小程序的开发,顺便了解下小程序的前世今生,也为总结,做了个ppt,对于小程序这个概念,理解的人可能一下子就明白了,对于远离移动端的人,可能没那么容易理解,所以这个ppt也算入门吧。...
  • 微信小程序应用介绍

    2019-09-03 11:05:19
    微信小程序介绍从以下几方面 什么是小程序?怎么建立一个小程序? 小程序的页面结构? 视图层结构等? 组件之间如何通信? 页面跳转方式有哪些 生命周期? 小程序如何引入其他ui组件? 小程序 是什么? 微信小...
  • 小程序中需要在一些位置添加广告,链接到外部的h5网页。 整体实现思路:定义一个广告组件,一个用来展示外部网页的page outUrl, 在组件中使用wx.navigateTo()等跳转到页面outUrl, outUrl.wxml页面中使用 <web-...
  • 微信小程序webview跳转小程序内路由

    千次阅读 2018-02-02 15:17:41
    原文地址:关于微信小程序webview的使用-实战教程-小程序社区-微信小程序-微信小程序开发社区-小程序开发论坛-微信小程序联盟 微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,...
  • 本文将结合具体的实战经验,主要介绍微信小程序的基础知识、开发中遇到的难点、项目的架构设计、最佳实践以及踩过的坑。文章内容较多,如果想看架构设计和躲坑技巧,请直接浏览后面的正文,简书没有目录,也挺伤感的...
  • 微信小程序定位总结

    千次阅读 2018-10-22 15:42:36
    工作需要, 一个web的项目嵌入到微信小程序web-view里面使用, 其中用到了微信的定位接口 wx.getLocation. 2. 遇到的问题 a. 使用微信的JSSDK中的getLocation方法 存在定位不准, 某些android手机上定位异常的问题, ...
  • 微信小程序上传word、txt、Excel、PPT等文件

    万次阅读 热门讨论 2018-06-10 11:08:17
    微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 ; 正文: 目前小程序没有能实现此功能的 API 所以我这里通过使用 web-view 实现; 实现流程: 1. 在小程序后台配置业务域名 2. 在...
  • 由于在微信小程序的webview中无法统一在小程序端适配iPhone下的黑条问题,当然自定义TabBar也有同样的问题,整个网页无法在webview中设置样式让下面空出来,这样一来,网页的底部就跟黑条重合,若有自定义TabBar则也...
  • 小编推荐:Fundebug专注于JavaScript、微信小程序、微信小游戏,Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务,众多大佬公司都在使用。 前言 微信小程序中可以直接运行 web 页面,这一新组件 web-...
  • 一、微信小程序购物车的支付功能 准备一些需要的支付配置信息,小程序 appid、微信商户号和商户密匙,如下所示: 微信认证-注册一个微信支付的商户号 ... 生成微信支付的秘钥 ...
  • 关于微信小程序webview的使用

    万次阅读 2017-12-04 14:30:58
    微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。同时提供一系列工具帮助开发者快速接入并完成小程序开发。关于如何注册配置就不多言了,本文主要还是体验...
  • 2020年将会是小程序井喷式发展的一年。本文带领大家一起入门微信小程序。从基础到进阶到高级再到实战,展现完整的小程序学习体系。其实,小程序只是一套框架,学习小程序就像小程序本身一样,即学即用,方便快捷。
  • 微信小程序之内嵌网页(webview)

    千次阅读 2020-02-10 21:27:06
    微信小程序提供了新的开放能力!它终于开放了在小程序中内嵌HTML页面的功能!从微信小程序基础库1.6.4开始,我们就可以在小程序内放置一个<web-view>组件来链接我们的HTML页面了。在这之前,我们在小程序中...
  • 首先在html2json.js文件中支持iframe的转化,因为小程序默认就不支持iframe所以在源码中并没有iframe的转化,需要我们自己添加 可以看到之前源码对于img标签的处理,我们就照猫画虎对于iframe进行处理 并取出有效...
  • 微信小程序web-view的简单思考和实践

    万次阅读 2017-12-08 16:43:35
    微信小程序web-view的知识点,目前最全的总结。
  • 微信小程序web-view网页调用JSSDK的chooseImage方法 微信小程序中的网页界面由web-view组件显示,网页通过接入JSSDK能够调用微信小程序的一些功能,例如:跳转小程序页面、拍照、选择照片、录音等。一些功能直接接入...
  • 1.微信小程序仅支持https请求,在开发时,可以设置官方编辑器中的详情->勾选“不检验合法域名....”,使用http开发、测试 2.由于小程序每个页面的cookie=“SESSIONID”处于变化中,使用session时,在发送https...
  • 微信小程序内嵌网页之实践-webview

    千次阅读 2018-07-27 17:54:52
    最近碰到一个需求,需要在微信小程序里加在非关联公众号的文章内容,并且修改部分文章内容。 在pc端这个很容易实现,可以通过Chrome extention实现,而在微信小程序中,能快速想到的就是webview加载网页。 由于...
  • 微信小程序webview内嵌h5页面

    千次阅读 2021-02-04 10:03:36
    微信小程序webview内嵌h5页面 微信官方文档 https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html 正式上线前准备(前期开发调试可以忽略) 首先登录小程序管理后台,把 web-view 直连的 h5 ...
  • 微信小程序中使用 Highcharts

    千次阅读 2018-05-16 16:00:49
    我们收到很多微信小程序开发者的反馈,表示强烈需要 Highcharts 进行数据展示。但是微信小程序不支持 DOM,并且没有暴露 SVG 相关的接口,所以截止到目前,我们无法直接在小程序中使用 Highcharts。 好消息是微信小...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,331
精华内容 932
关键字:

微信小程序iframe

微信小程序 订阅