精华内容
下载资源
问答
  • 小程序web-view保存图片到本地

    千次阅读 2020-06-01 21:36:34
    小程序显示图片 1.直接显示base64 ①此方式需要注意变更字符串的头信息为 “data:image/jpg;base64,” ②需要处理的字符串base64是头信息后的字符串,如需操作需要分割取值 2.存储为临时文件后使用临时路径显示 ...

    小程序显示图片

    1.直接显示base64

    ①此方式需要注意变更字符串的头信息为 “data:image/jpg;base64,”
    ②需要处理的字符串base64是头信息后的字符串,如需操作需要分割取值

    2.存储为临时文件后使用临时路径显示

    base64使用微信的API转化一下,存储为临时路径

    var base64data = 'data:image/jpg;base64,.....';
            const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || [];
            if (!format) {
              return (new Error('ERROR_BASE64SRC_PARSE'));
            }
            var FILE_BASE_NAME = 'tmp_base64src';
            var save = wx.getFileSystemManager();
            const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;
            const buffer = wx.base64ToArrayBuffer(bodyData);
            save.writeFile({
              filePath,
              data: buffer,
              encoding: 'binary',
              success() {
                console.log( "res",res )
                _this.setData({
                  filePath
                })
              },
              fail() {
                return (new Error('ERROR_BASE64SRC_WRITE'));
              },
            });

     

    小程序保存图片

    1.使用小程序下载API的方式

    此方法包含两个步骤:①先存临时文件,②将临时文件存入相册

    2.使用小程序的长按保存方式

    可以长按保存的前提是:当前页面(含web-view)长按目标必须是图片标签,不允许是背景图片

    展开全文
  • 微信小程序web-view公众号与小程序支付间的切换使用 最近小程序开放了新功能,支持内嵌网页有域名的那种,可以内嵌到小程序里了! 那么这意味着什么呢?你还需要开发独立开发官网小程序吗?之前的微信公众号功能大...

    微信小程序web-view公众号与小程序支付间的切换使用

            最近小程序开放了新功能,支持内嵌网页。html写的网页,官网,网站,运行在浏览器上的,有域名的那种,可以内嵌到小程序里了!
    

    那么这意味着什么呢?你还需要开发独立开发官网小程序吗?之前的微信公众号功能大部分也可以直接通过小程序webview实现了。
    这几天刚好公司也有这方面的需求,怀着激动心情的我开始了踩坑之旅。

         开发之前我们需要把需要的环境配置好,这里就引用官方的介绍了————
    

    1. 开发者登录小程序后台,选择设置-开发设置-业务域名,新增配置域名模块。目前小程序内嵌网页能力暂不开放给个人类型帐号和海外类型帐号。
    2.配置的业务域名必须时https

    那么配置好后,马上可以进入开发啦!
    这里写图片描述

      页面中引入公众号的首页,小程序端的代码不是很多,主要的是后台进行结合。
    
    1.在后端添加一个小程序的入口方法,
    

    /**
     * 小程序第一次入口
     * @return
     */
    public String wxIndex(){//返回首页
        sessions=request.getSession().getId();
        return "home";
    }
    

    这里我没有做任何的处理,这个项目首页是不用登陆的,直接返回首页;来到这一步时我们发现之前公众号后台保存在session中的信息获取不到,使用后发现小程序每次请求sessionId都会发生改变,这样后台无法使用session储存数据。

    解决方案:
    

    小程序第一次请求后台返回一个sessionId,之后小程序在参数或header中带入这个sessionId,后台使用这个session来处理。注意session销毁以及过期设置。


    wx.login({
      success: function (res) {        wx.getSetting({
          success(setRes) {
            // 判断是否已授权  
            if (!setRes.authSetting['scope.userInfo']) {
              // 授权访问  
              wx.authorize({
                scope: 'scope.userInfo',
                success() {
                  //获取用户信息  
                  wx.getUserInfo({
                    lang: "zh_CN",
                    success: function (userRes) {
                      // var session_id= wx.getStorageSync('JSESSIONID');
                      //发起网络请求  
                      wx.request({
                        url: 'https://www.ulin5.com/vip/buser-bind-mobile_wxXiaoChengXuLogin.html',
                        data: {
                          code: res.code,
                          encryptedData: userRes.encryptedData,
                          iv: userRes.iv
                        },
                        header: {
                          "Content-Type": "application/x-www-form-urlencoded"
                        },
                        method: 'POST',
                        //服务端的回掉  
                        success: function (result) {
                          console.log(result)
                          // var session_id = wx.getStorageSync('JSESSIONID');//本地取存储的sessionID  
                          // if (session_id == null || session_id == "") {
                            wx.setStorageSync('JSESSIONID', result.data.sessionId) //如果本地没有就说明第一次请求 把返回的session id 存入本地  
    
                          // }
                          console.log(result.data.openId)
                          getApp().openid = result.data.openId
                          // var data = result.data.result;
                          // data.expireTime = nowDate + EXPIRETIME;
                          // wx.setStorageSync("userInfo", data);
                          // userInfo = data;
                        }
                      })
                    }
                  })
                }
              })
              })
    

     把小程序所需要的openid和unionid拿到,由于公众号的openid   和小程序的openid不同,所以这需要用到unionid。
    换句话说,同一用户,对同一个微信开放平台帐号下的不同应用,UnionID是相同的。
    此前的OpenID机制,每个微信号对应每个公众号只有唯一的OpenID,所以不同微信公众号之间是不能共享用户的,现在有了UnionID就可以了。
       前面说到小程序每次请求的sessionId不同,所以通过sessionId可以获取到我们存储的数据信息。
       注意Servlet2.1之后不支持SessionContext里面getSession(String id)方法。
       我这里通过HttpSessionListener监听器和全局静态map自己实现一个SessionContext。
    

    public class MySessionContext {
    
     private static HashMap mymap = new HashMap();
    
        public static synchronized void AddSession(HttpSession session) {
            if (session != null) {
                mymap.put(session.getId(), session);
            }
        }
    
        public static synchronized void DelSession(HttpSession session) {
            if (session != null) {
                mymap.remove(session.getId());
            }
        }
    
        public static synchronized HttpSession getSession(String session_id) {
            if (session_id == null)
            return null;
            return (HttpSession) mymap.get(session_id);
        }
        }
    

            public class SessionListener implements HttpSessionListener {
    /*public static Map userMap = new HashMap();  */
    /*private   MySessionContext myc=MySessionContext.getInstance();  */
    
    @Override
    public void sessionCreated(HttpSessionEvent arg0) {
        /*myc.AddSession(arg0.getSession()); */
        MySessionContext.AddSession(arg0.getSession());
    }
    
    @Override
    public void sessionDestroyed(HttpSessionEvent arg0) {
        HttpSession session = arg0.getSession();  
        /*myc.DelSession(session);*/
         MySessionContext.DelSession(session);
    }
    
    }
    

    web.xml添加一个监听器:

    <listener>  
    <listenerclass>com.common.util.SessionListener</istener-class>  
    </listener>  
    

    根据sessionId获取Session对象:

    String sessionId = request.getParameter("sessionId");

    HttpSession session = MySessionContext.getSession(sessionId);

    写到这里已经算是完成一半了,只要在后台加一个处理小程序进来的方法,把所需要的用户信息保存到数据库中。
    我们不需要改变以前写好处理公众号的任何代码(根据项目进行整合),
    

    public String wxLogin(){//java后端
    String Code = request.getParameter("code");// 登陆状态码
        String typeDate = request.getParameter("encryptedData");// 用户加密信息,用于解密获取unionid
        String iv = request.getParameter("iv");// 解密密钥
        String OPENID_URL = "https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret"
                + "=SECRET&js_code=JSCODE&grant_type=authorization_code";// 获取openid的地址
        UserInfo userInfo = null;
        String url = OPENID_URL.replace("APPID", Pkcs7Encoder.APPID)
                .replace("SECRET", Pkcs7Encoder.APPSECRET)
                .replace("JSCODE", Code);
        JSONObject jsonObject = null;
        jsonObject = Pkcs7Encoder.doGetStr(url);// 调取Get提交方法
        String OpenId = jsonObject.getString("openid"); // 获取openid
        /*
         * ResourceBundle resource = ResourceBundle.getBundle("weixin");
         * //读取属性文件
         */String requestUrl = "https://api.weixin.qq.com/sns/jscode2session"; // 请求地址
        /* String wxUserInfo=Pkcs7Encoder.sendPost(requestUrl, requestUrlParam); */
        // 获取会话密钥(session_key)
        String session_key = jsonObject.getString("session_key");   
        ....     //通过逻辑代码保存我们需要的信息
    }
    

      接下来到最重要的环节了,到了我们最期待的支付环节了。由于web-view目前还不支持支付接口。
      我们需要判断是否运行在小程序环境中进行支付的互换,从而实现支付功能。
    

    <script type="text/javascript"src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>

    在网页内可通过window.__wxjs_environment变量判断是否在小程序环境。
    


    // web-view下的页面内
    wx.ready(function() {
    console.log(window.__wxjs_environment === 'miniprogram') // true
    })

    例如:

      var isWxMini = window.__wxjs_environment ===       'miniprogram';
        if (isWxMini) {//判断是否在微信小程序环境中调用支付接口
        $("#wxloading").hide();
        var jumpUrl = encodeURIComponent(window.location)
        //把要用到的参数传到小程序中进行支付
        var path = '/pages/pay/pay?jhNum='+jhNum+'&cproType='+cproType+'&zcProId='+zcProId+'&url='+url+'&cproId='+cproId+'&esOrderc='+esOrderc;
        wx.miniProgram.navigateTo({
            url: path
        })
    
    }else{//公众号支付
    window.location.href="/vip/buy-group_saveJoinPt.html?cproId="+cproId+"&jhNum="+jhNum+"&cproType="+cproType+"&zcProId="+zcProId+"&esOrderc="+esOrderc;
    }
    

    小程序pay文件夹下新建pay.js和pay.wxml

     pay.js
              Page({
      onLoad: function (options) {
      console.log(options)
        // 获取网页传过来的值
     // TODO 用es6解构来获取值TODO
    var jhNum = options.jhNum
    var cproType = options.cproType
    var zcProId = options.zcProId
    var cproId = options.cproId
    var esOrderc = options.esOrderc
    // var jumpUrl = decodeURIComponent(options.jumpUrl)
    var tourl=options.url
    // console.log(tourl)
    var openid = getApp().openid
    console.log(openid)
    var session_id = wx.getStorageSync('JSESSIONID')//本地取存储的sessionID
    // console.log('----------sessionid' + session_id+'-----------------')
    wx.request({
      url: tourl,
      data: {
        openid: openid,
        jhNum: jhNum,
        cproType: cproType,
        zcProId: zcProId,
        cproId: cproId,
        esOrderc: esOrderc
      },
      header: {
        "Content-Type": "application/x-www-form-urlencoded",
        'Cookie': 'JSESSIONID=' + session_id
      },
      method: 'POST',
      success: function (res){
        console.log(res)
        wx.requestPayment({
          'timeStamp': res.data.timeStamp,
          'nonceStr': res.data.nonceStr,
          'package': res.data.package,
          'signType': 'MD5',
          'paySign': res.data.sign,
          'success': function (res) {
            console.log('支付成功')
             wx.navigateBack() //返回会上个页面
          },
          'fail': function (res) {
            console.log('支付失败')
              wx.navigateBack() //返回会上个页面
          }
        })
      }
    })
    }
    })
    

    到这基本上已经完成,个人感觉这种实现方式在用户体验度上并不是很友好,但是基本的功能都可以实现。
    相信官方也会对webview更进一步的优化。能在webview中直接调用支付的接口。
    如果大家有更好的实现思路,千万别忘了告诉我哦。
    由于作者还是个工作不到一年的小菜。在代码编写上还有很多的不足,欢迎大家指正。
    这也是我的第一篇博客,嗯嗯嗯还是有点小激动。^_^
    
    展开全文
  • 目前基本的思路是将view中的内容传到画布中去,然后将画布生成图片保存到手机里。有没有人实现了的,求指点![图片说明](http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/001/face/83.gif)。如果这种办法行...
  • 我们都知道web-view 向H5传值只需在url里带过去参数就好,但是H5要向小程序传值时却颇有问题。 一是postMessage不能被实时监控,导致小程序内不能实时拿到H5发来的值; 二是页面跳转时的正向和反向传值。 首先是...

    我们都知道web-view 向H5传值只需在url里带过去参数就好,但是H5要向小程序传值时却颇有问题。

    一是postMessage不能被实时监控,导致小程序内不能实时拿到H5发来的值;

    二是页面跳转时的正向和反向传值。

    首先是postMessage的实时监控问题,微信官方说只有在特定时机(小程序后退、组件销毁、分享)触发并收到消息,显然是不实用的,那么我们只能变相解决。

    1、如果是要接收H5抛出来的值,再在当前页面做弹框或请求接口,这中情况可以将弹框或接口请求写到H5里面去,在网页端处理;

    2、如果是H5抛出值之后要页面跳转到下一页或返回,也就是正向和反向传值+跳转问题,请看以下。

    正反向传值+页面跳转:

    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    
    var userAgent = navigator.userAgent;
    // 是否是微信小程序
    var isMini = /miniProgram/i.test(userAgent);
    
    
    //1.正向传值,通过URL传参,加JSSDK的接口跳转
    
    if(isMini){
      var miniData = {
        type: 'docServe',
        groupCheckId: gId
      }
      wx.miniProgram.navigateTo({
        url: '../groupService/groupService?data=' + JSON.stringify(miniData)
      })
    }else{
      // 不是微信小程序
    }
    
    
    //2.反向传值,通过postMessage,加JSSDK的接口返回
    
    if(isMini){
      wx.miniProgram.postMessage({
        data: {
          date: dat
        }
      });
      wx.miniProgram.navigateBack();
    }else{
      // 不是微信小程序
    }

    值得注意的是,反向传值方法中使用了navigateBack,这就使得满足了postMessage触发的时机之一,在小程序后退时触发。

    所以后退时会先触发并捕获postMessage之后,再执行返回动作,这里还需将捕获到的值传到上一页。这里有三种方法:

    1、利用getCurrentPages()获取页面栈,直接给上一个页面的变量赋值;

    2、利用小程序缓存API保存,返回之后在onShow生命周期内获取刷新;

    3、利用getApp().globalData设置全局变量。

     

    另外,H5反向传值给小程序应该也可以是用URL传值,即是用JSSDK接口redirectTo,可是设置url传值重新打开上一页,不过此方法会导致上一页重新加载,也就是会导致之前录入的信息被刷新,看情况使用。

    展开全文
  • 小程序长按识别二维码, 网页在小程序中长按识别二维码,web-view长按识别二维码 效果图: html 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>&...

    小程序长按识别二维码, 网页在小程序中长按识别二维码,web-view长按识别二维码

    效果图:

    html 代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<div class="t-share">
    			<img src="https://aikaoya.cloudlinks.com.cn/wq.jpg"></div>
    		<div class="but">长按图片保存到相册,就能分享给好友啦~</div>
    		<script language="javascript">
    			
    		</script>
    	</body>
    </html>
    

    小程序代码:

    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        scene: 'https://aikaoya.cloudlinks.com.cn/wq.jpg',
        show_web: false,
      },
      previewImage: function (e) {
        wx.previewImage({
          urls: this.data.scene.split(',')
          // 需要预览的图片http链接  使用split把字符串转数组。不然会报错
        })
      },
      onLoad(option) {
      },
      click2() {
        this.setData({
          show_web: true
        })
      },
    })
    <web-view wx:if='{{show_web}}' src="https://aikaoya.cloudlinks.com.cn/test2.html"></web-view>
    
    <button catchtap="click2">点击进入web-view</button>
    
    <button catchtap="click3">点击二维码后长按识别</button>
    
    <image class='img' bindtap="previewImage" src='{{scene}}'></image>

     

    展开全文
  • 为了便于开发者灵活配置小程序,微信小程序开放了内嵌网页能力。...一、小程序内嵌网页web-view图文教程 1) 微信公众平台,登录小程序账号 2) 左侧-设置-开发设置-业务域名-配置 3) 小程序管理员微信扫码
  • 本demo实现的功能,微信小程序给h5传参,h5给小程序传参 实现代码: <!--index.wxml --> <web-view src="https://xxx.xxx.cn/test1.html?user=12" bindmessage="bindGetMsg"/>...
  • 小程序学习01->view与scroll-view

    千次阅读 2018-01-18 19:25:05
    - viewview是最常用也是最简单的的视图窗口组件,相当于HTML页面同的标签。 下面来实战一下使用view。 1、在app.json下添加view页面。 添加后按ctrl+s,微信开发工具会自动生成页面。...</view><view class=
  • 微信小程序scroll-view实现左右联动

    千次阅读 2019-11-02 15:17:54
    微信小程序利用scroll-view实现左右联动 点击左边的按钮时,右边可以跳动到指定的位置 首先要注意使用scroll-view竖屏滚动,需要给scroll-view固定高度 其次在点击时,需要给需要滚动的scroll-view加上scroll-...
  • 微信小程序开发交流qq群 581478349 承接微信小程序开发。扫码加微信。 正文: 先上效果图,再附上完整源码: 1.多张图片循环渲染后预览、保存、识别带参数二维码 <view wx:for="{{imgalist}}" class=...
  • js: baocun: function (e) { wx.showModal({ title: '提示', content: '确定要保存这张图片吗?', success: function (res) { if (res.confirm) { console.log('用户点击确定') wx....
  • 微信小程序保存图片到相册

    千次阅读 2018-06-07 19:38:16
    先来看小程序中的保存图片到相册的api [javascript] view plain copy wx.saveImageToPhotosAlbum({   filePath : "./test.png", //这个只是测试路径,没有效果   success(res) {   ...
  • 微信小程序 view的文本不能自动换行问题

    万次阅读 多人点赞 2017-04-06 19:01:05
    小程序碰到了个问题,view并不能让文本自动换行。 官方定义的view组件,display为block。 scroll-view中定义display:flex是无效的。 view中要让中文片段自动换行,需要采用white-space
  • 最近在做一个图片编辑的小程序,就是在一张图片上,放一些小装饰(图片),通过监听手势和使用CSS的transform实现移动和缩放。 ## 问题 但是遇到一个问题,就是如何将图片加上面的小装饰作为一个整体的图片保存起来...
  • 微信小程序设置web-view的业务域名

    千次阅读 2018-12-10 12:03:20
    微信小程序设置web-view的业务域名 域名必备 你的域名必须要备案过 你的域名必须是https,而不能是http web-view小程序后台添加业务域名,只解析业务域名中的url网页地址的. 域名是需要ICP进行备案的. 用ftp...
  • 小程序生成图片保存到系统相册

    千次阅读 2018-08-11 15:01:54
    view class="container"&gt; &lt;view class='page-section'&gt; &lt;view class="saveImage" style="padding:0 8px;"&gt; &lt;view class="img_box...
  • 貌似小程序只识别小程序码,不能识别二维码 WXSS .cont{ position: relative; width: 100%; height: 300rpx; top: 50rpx; text-align: center; } .img{ position: relative; display: inline-block...
  • 【微信小程序view之点击变色效果

    千次阅读 2020-01-08 10:10:08
    <view class='view-box-btn' ...保存</view> 这样的一个按钮,在wxss中设置它的样式 .view-box-btn { width: 90%; height: 100rpx; margin-top: 20px; border-radius: 20rpx; border: 1px solid...
  • uniapp 小程序分享海报保存图片踩坑

    千次阅读 2019-08-01 11:00:40
    前言:第一次写的时候,思路。 1:获取权限>...但是在开发小程序开发工具中在图片暂存出现问题,因为开发工具内downloadFile正常,到了手机微信报错,因为只能下载http文件,二手机返回的是“wx...
  • testDemo.wxml <form bindsubmit="formSubmit"> <view class="page-section"> <view class="weui-cells__title">.../view>...view class="weui-cells ...view class="weui-cell weui-cell_input">.
  • 微信小程序点击保存图片到本机

    千次阅读 2018-10-24 09:43:45
    1.首先我们要把想保存的图片绘制在画布上 <view class='container'> <canvas style='width:{{canvasWidth}}px; height:{{canvasHeight}}px' class="canvas" id="canvas" canvas-id="canvas" disable-...
  • 1.登录微信小程序开发后台 https://mp.weixin.qq.com/ 点击开发设置 2.设置request合法域名 ...3.设置完成后,在小程序view中添加web-view组件,src指向第3步配置的站点页面地址。 4.在其他小程序...
  • 微信小程序没有将view,image,text等标签直接生成图片的api。但是有将canvas直接生成图片的api 将canvas标签生成图片的api---------------------wx.canvasToTempFilePath view,image,text等标签,都可以在canvas里...
  • 小程序保存图片到相册功能实现 项目中有个保存二维码到相册的功能,所以涉及到用户是否授权相册权限的问题。废话不多说,直接上干货… 功能逻辑: 先检查用户请求过的权限中是否允许&amp;amp;amp;quot;保存到...
  • 在微信小程序中要保存图片到本地相册,需要获取相册权限。总之整个功能实现下来需要如下几个小程序的API:wx.getSetting,wx.authorize,wx.openSetting,wx.downloadFile,wx.saveImageToPhotosAlbum 但是在...
  • 微信小程序picker-view日期选择器

    千次阅读 2016-12-23 11:29:30
    微信小程序日期选择器
  • 微信小程序实现点击保存图片

    千次阅读 2019-10-23 19:14:44
    微信小程序实现点击保存图片 wxml代码 <view class='title'>点击图片保存图片</view> <image class='img' data-src="http://img2.imgtn.bdimg.com/it/u=3507713655,931555131&fm=26&gp=0.jpg...
  • 主要是用到这个api wx.previewImage({ current: , // 当前显示图片的http链接 urls: [] // 需要预览...}) 页面.wxml ...{{invoice.viewPath}}" data-url='{{invoice.viewPath}}' bindtap='showBigImg'&g...
  • js 里面声明小程序的全局变量绑定到vue的原型对象上面 点击右上角菜单转发后 把webViewUrl 绑定到全局变量里面去 内嵌网页点击右上角的分享 会多出一个webViewUrl onShareAppMessage: function(res) { ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 204,864
精华内容 81,945
关键字:

保存view小程序