精华内容
下载资源
问答
  • 微信小程序调用回调函数没有进入到返回区域, 回答:微信开发者工具是看不到分享结果的,只能监听到分享这个动作,但是分享成功是监听不到的,我们可以用手机看,在手机上打开调试模式,记得要打印,你会发现可以...

    微信小程序调用回调函数没有进入到返回区域,

        回答:微信开发者工具是看不到分享结果的,只能监听到分享这个动作,但是分享成功是监听不到的,我们可以用手机看,在手机上打开调试模式,记得要打印,你会发现可以进入到callback回调函数了


    展开全文
  • 微信、QQ小程序

    2018-10-09 13:41:41
    微信小程序warning1.请检查login云函数是否部署2. 报错:Error: tunneling socket could not be established, cause=connect ECONNREFUSED 127.0.0.1:644121.打开项目2.新建页面 warning 1.请检查login云函数是否...

    QQ小程序兼容微信小程序。其不同点在最下方

    小程序开发:需要校验域名的,打开开发者调试,就能用了。

    小程序加载background-image背景图片

    https://blog.csdn.net/zheng548/article/details/81226704

    根据 sitemap 的规则[0],当前页面 [pages/index/index] 将被索引

    • sitemap 的索引提示是默认开启的,如需要关闭 sitemap 的索引提示,
      • 可在小程序项目配置文件 project.config.json 的 setting 中配置字段 checkSiteMap 为 false

      • 开发工具更新后,代码有些地方需要做相应的调整

      • “checkSiteMap”: false,

    要点

    • 服务器域名必须备案
    • 个人或企业先通过资质认证才能发布小程序
    • 小程序不能写cookie。将ud、sd加在header中携带
    • 小程序缓存是永久缓存。除非清掉
    • 小程序可以联测试机的地址联调,启动nginx,将测试机地址配置为nginx配置地址。

    小程序分享

    • 开发工具中无法看到图片,但是使用预览,在手机上能够正确的转发并显示图片。
    onShareAppMessage: function () {
      return {
        title: app.globalData.shareTitle,
        path: '/pages/jingxuan/jingxuan',
        imageUrl:'/image/share.png'
      }
    },
    

    随笔

    • 小程序加载background-image背景图片
    • 字体中划线text-decoration:line-through
    • 小程序生成二维码 http://goqr.me/api/ paidan小程序邀请页
    • 小程序滚动至顶部:wx.pageScrollTo({ scrollTop: 0 })
    • scroll view的那个nowrap会影响子元素换行
    • 小程序测试号配置https://developers.weixin.qq.com/sandbox?tab=miniprogram&hl=zh。可导入、新建代码片段进行代码尝试
    • 小程序加载background-image背景图片
    • 小程序分享【注意小程序js自动生成onShareAppMessage方法】,页面:<button class='join' open-type="share" data-info='{{item}}'>立即分享</button>
      • js:onShareAppMessage: function (res) { var data = res.target.dataset.info; return { title: data.title, imageUrl: data.pic, path: '' } }
    • 使用web_view打开h5页面。在公众号–开发者工具–开发者工具配置–添加开发者appid。
    • 超出省略:
    *{
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    /* 超出2行省略 */
    *{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    
    • web_view参考种豆、派单
    • css阴影 transform: translate3d(0,-2px,0);box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    • 设置小程序标题背景色:json:"navigationBarBackgroundColor": "#f9f9f9",
    • 动态修改小程序标题
    wx.setNavigationBarTitle({
        title: this.data._title
    })
    
    .searchwarp input::before{
        content: "";
        display: inline-block;
        width: 36rpx;
        height: 32rpx;
        background: url(http://img.heiyanimg.com/image/ico_search@2x.png) no-repeat;
        background-size: 100%;
        position: absolute;
        left: 30rpx;
        top: 50%;
        transform: translateY(-50%);
    }
    
    • 小程序选择地址:
      wx.chooseLocation({       
        success: res => {     // 用户选中地址 点击右上角 确定后  返回数据  res                              
          console.log(res);
          that.setData({
            address:res.address
          })
        }    
      })
    
    • 小程序input为数字键盘:微信小程序的 input 有个属性叫 type,这个 type 有几个可选值:
      • text:不必解释
      • number:数字键盘(无小数点)
      • idcard:数字键盘(无小数点、有个 X 键)
      • digit:数字键盘(有小数点)
      • 注意:number 是无小数点的,digit 是有小数点的
    • 小程序苹果6s兼容遇到的坑的总结
    • 测试

    小程序登录 申请 注册

    关于小程序登录的unionId,QQ小程序需要QQ互联申请,后台获取unionID,判断登录状态,返回给前端

    小程序在iphoneX上的兼容性

    • iphoneX下边有虚拟按键,需要预留一定位置。

    html

      <view class="nav-set {{isIpx?'fix-iphonex-button':''}}">
    

    css

      /* 适配iphone x吸底 */
      .fix-iphonex-button {
        padding-bottom: 40rpx;
      }
      .fix-iphonex-button::after {
        content: ' ';
        position: fixed;
        bottom: 0!important;
        height: 68rpx!important;
        width: 100%;
        background: #fff;
      }
    

    js

    // 判断机型
    isIpx:function(){
     var self=this;
     wx.getSystemInfo({
       success: function (res) {
         if (res.model.indexOf("iPhone X") >= 0){
           self.globalData.isIpx=true;
         }
       }
     })
    },
    设置变量。
    globalData:{
     userInfo:null,
     isIpx:false,
    },
    

    小程序加载background-image背景图片

    加载background-image背景图片

    • 1.在网站http://imgbase64.duoshitong.com/上将图片转成base64格式的文本
    • 2.在WXSS中使用以上文本:background-image: url(“data:image/png;base64,iVBORw0KGgo=…”);
    • 3.为了是背景图片自适应宽高,可以做如下设置:background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
    .chapterContent .green::before{
    	  background: url(data:image/png;base64,iVBORw0KGgoA...) center 0 no-repeat;
        background-size: cover;
        position: fixed;
        height: 100vh;
        width: 100%;
        left: 0;
        top: 0;
        content: ' ';
        z-index: 0;
    }
    

    小程序时间戳转换

    format(shijianchuo) {
        var that = this;
        //shijianchuo是整数,否则要parseInt转换
        // 注意时间戳是否为秒。否则需要  shijianchuo * 1000
        var time = new Date(shijianchuo);
        var y = time.getFullYear();
        var m = time.getMonth() + 1;
        var d = time.getDate();
        var h = time.getHours();
        var mm = time.getMinutes();
        var s = time.getSeconds();
        return y + '-' + that.add0(m) + '-' + that.add0(d);
        // return y + '-' + that.add0(m) + '-' + that.add0(d) + ' ' + that.add0(h) + ':' + that.add0(mm) + ':' + that.add0(s);
      },
      add0(m) {
        return m < 10 ? '0' + m : m
      },
      
      var times = this.format(shijianchuo)
      
    

    + 小程序自定义头部导航栏【不建议使用。在iphoneX等有齐刘海的机型上会有一堆问题】

    • 1.在app.json中修改:"navigationStyle": "custom"
    • 2.在html中:
    <import src="/utils/template/commonHeader.wxml" />
    <template is="commonHeader" data="{{headerInfo}}"></template>
    
    • 3.css中
    @import "/utils/template/commonHeader.wxss";
    
    • 4.在js中:
    data:{
      headerInfo: {
        headerName: '个人中心',
        headerFlag: 'home'
      }
    }
    
      goback() {
        wx.navigateTo({
          url: '',
        })
      },
      gohome() {
        wx.navigateTo({
          url: '/pages/index/index',
        })
      },
      gobackhome() {
        wx.navigateTo({
          url: '/pages/index/index',
        })
      }
    

    上传图片

    1. 先在微信公众平台配置uploadFile合法域名
    2. 使用以下方法上传 上传图片
    wx.chooseImage({
      success(res) {
        const tempFilePaths = res.tempFilePaths
        wx.uploadFile({
          url: 'https://example.weixin.qq.com/upload', // 仅为示例,非真实的接口地址
          filePath: tempFilePaths[0],
          name: 'file',
          formData: {
            user: 'test'
          },
          success(res) {
            const data = res.data
            // do something
          }
        })
      }
    })
    

    小程序登录

    <button open-type='getUserInfo' class='btn mainBgColor' lang="zh_CN" bindgetuserinfo="goLogin">
    微信登录
    </button>
    
    // 判断登录情况
    goLogin: function() {
      var that = this
      var allreadyLogin = wx.getStorageSync('userInfo');
      if (!allreadyLogin) {
        wx.getUserInfo({
          success: function(res) {
            if (res.errMsg == 'getUserInfo:ok') {
              wx.setStorageSync('userInfo', JSON.stringify(res.userInfo))
            }
          }
        })
      }
      继续处理。。。
      
    }
    

    报错

    小程序 Do not have choose handler in current page: pages/storeHome/storeHome.
    解决方法:换一个方法名重新写方法。可能是和小程序的官方方法冲突

    1.打开项目

    • 1.提示 点击获取openid
    • 1.1 部署:在 cloud-functions/login 文件夹右击选择 “创建并部署”
    • 1.2 再弹框中点击【开通-小程序~云开发】
    • 1.3 创建环境。firs-program-demo

    2.新建页面:

    • 1.在pages上右键新建目录–test
    • 2.在test上右键新建page–test1.就会新建test1的项目文件,包括test1.js、test1.json、test1.wxml、test1.wxss文件。同时在app.json中会自动添加此页面的路由:"pages/test/test"

    3.微信小程序弹窗:

    小程序弹窗

    wx.showModal({
        title: '提示',
        content: params.data.msg,
        success: function (res) {
            if (res.confirm) {//这里是点击了确定以后
                console.log('用户点击确定')
            } else {//这里是点击了取消以后
                console.log('用户点击取消')
            }
        }
    })
    wx.showModal({
        title: '提示',
        icon: "none",
        content: "认购金额已退,请到我的钱包中查询",
        success(res) {
          if (res.confirm) {
            console.log('确定');
            that.getData();
          } else if (res.cancel) {
            console.log('取消');
          }
        }
      })
    wx.showToast({
      title:'提示',
      icon: 'none'
      
    })
    
    

    小程序调试

    http的不打开调试会出现很多问题
    打开调试就OK了


    小程序打开另一个小程序

    • 1.首先在app.json中加入另一个小程序的appid
    {
      ...
      "navigateToMiniProgramAppIdList": [
        "wxdf30802**0c27"
      ]
    }
    
    wx.navigateToMiniProgram({
      appId: 'wxdf30802**0c27',
      path: 'pages/index/index?id=123',
      extraData: {
        foo: 'bar'
      },
      envVersion: 'develop',
      success(res) {
        // 打开成功
      }
    })
    

    小程序 git 状态展示

    文件图标状态-官网定义:

    目录树:
    • U 文件未追踪
    • A 新文件(Added,Staged)
    • M 文件有修改(Modified,Staged)
    • C 文件有冲突(Confict)
    • D 文件被删除(Delete)
    文件夹目录图标状态的含义:
    • 小红点 目录下至少存在一个删除状态的文件
    • 小橙点 目录下至少存在一个冲突状态的文件
    • 小蓝点 目录下至少存在一个未追踪状态的文件
    • 小绿点 目录下至少存在一个修改状态的文件
    文件编辑

    显示与上一版本内容的比较

    • 蓝色线条 此处的代码有变动
    • 绿色线条 此处的代码是新增的
    • 蓝红色三角箭头 此处的代码被删除

    设置启动页面

    开发时,项目编译想直接进入我们编译的页面

    • 方法一:在app.json中,pages数组,设置在第一个的页面,就是启动页面
    • 方法二:开发者工具中,编译选项处,添加编译模式—勾选‘下次编译时模拟更新’,将路径修改为要进入的路径

    小程序和VUE区别

    小程序:if

    if:

        <view wx:if="{{view == 'WEBVIEW'}}">WEBVIEW</view>
        <view wx:elif="{{view == 'APP'}}">APP</view>
        <view wx:else="{{view == 'MINA'}}">MINA</view>
    
    • 注意条件中的true是否带引号'true'

    小程序页面跳转

    • 1.类似于a标签
       <navigator url="../navigator/navigator?title=我是navi">跳转到新的页面</navigator>
       <navigator url="../redirect/redirect?title=我是red" redirect>跳转到当前页面</navigator> 
    
    • 2.js跳转
    wx.navigateTo({
      url:'/pages/target/url'
    })
    
    返回上一页面
    wx.navigateBack();
    

    获取小程序页面滚动条高度

    var query = wx.createSelectorQuery()
    query.select('#book-id').boundingClientRect(function(res) {
      if(res.bottom>1000){
        that.setData({
          bookShow:false
        });
      }
    }).exec()
    

    微信小程序获取当前页面的路径的方式

    使用`getCurrentPages`可以获取当前加载中所有的页面对象的一个数组,数组最后一个就是当前页面。
    var pages = getCurrentPages() //获取加载的页面
    var currentPage = pages[pages.length-1] //获取当前页面的对象
    var url = currentPage.route //当前页面url
    var options = currentPage.options //如果要获取url中所带的参数可以查看options
    

    小程序设置置顶

    wx.pageScrollTo({
      scrollTop: 0
    })
    

    小程序缓存

    // 保存
    wx.setStorage({
      key:'',
      data:''
    })
    
    wx.setStorageSync(key,data)
    
    
    // 获取
    wx.getStorage({
        key:'data',
        success(res){
          console.log(res.data);
        }
    })
    
    // 清除
    wx.clearStorage();
    

    注意事项

    • 自定义方法写在onLoad、onReady、onShow方法之后

    小程序onReachBottom不执行

    原因:
    最外层设置了display:flex、display:position
    小程序onReachBottom不执行,{onReachBottomDistance:100}这个属性也设置了,上拉页面为什么不执行onReachBottom?

    跳转回首页

    只能用switchTab跳转首页、tab页面

    wx.switchTab({
      url: '/pages/index/index'
    })
    

    小程序 for循环子

    <view wx:for="{{list}}" wx:for-item="items">
        {{items}}
    </view> 
    

    获取滚动条当前位置

    onPageScroll:function(e){ // 获取滚动条当前位置
      console.log(e)
    },
    

    小程序类名判断

    <view class="title {{tabFixed ? 'tab-fixed':''}}">
      <h5 class="singleline">{{book.name}}</h5>
    </view>
    

    1.请检查login云函数是否部署

    请检查login云函数是否部署

    2. 报错:

    Error: tunneling socket could not be established, cause=connect ECONNREFUSED 127.0.0.1:64412
    修改:设置–代理设置
    从:使用系统代理 --》改为 不适用任何代理

    data中可以声明t:null,传值 setInterval

    data: {
        t: null,
    },
    getPageScroll(){
        let t = setInterval(function () {
          that.getPageScroll(t);
        }, 1000)
    },
    onUnload: function() {
        console.log("onUnload---")
        clearInterval(this.data.t);
    },
    

    小程序生命周期

    当退出此页面时:

    
      /**
       * 页面的初始数据
       */
      data: {
    
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
    
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
        wx.navigateBack();
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载    // 退出页面时执行
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
        return {
          title: app.globalData.shareTitle,
          path: '/pages/jingxuan/jingxuan',
          imageUrl:'/image/share.png'
        }
      }
    
    

    ——————————————————————————————————

    QQ小程序

    小程序的union是后台获取。与前台无关。

    • QQ小程序的unionId需要通过QQ互联将小程序ID绑定才能拿到。
    • QQ小程序需先申请、注册用户才能
    • 1、ide(分mac和windows)
    • 2、开发者管理端链接:https://q.qq.com(一定要先注册)
    • 3、各类文档【开发、设计、运营等各类文档】:打开https://q.qq.com/wiki/查看各类文档(如果没有登录开发者管理端会提示先登录),文档是动态更新的,会不断更新新增API、能力等
    • 4、体验版QQ安装包,但目前该版本尚未灰度发布,故需请各位开发者「把需要登陆手机QQ的号码登记到 https://docs.qq.com/form/fill/DQUtSZndwR2ZMSWdw
      中」,以便给各位开通体验白名单

    QQ小程序的分享配置

      <button open-type="share">分享</button>
    
      onLoad: function () {
        qq.showShareMenu({
          showShareItems: ['qq', 'qzone']
        });
        // wx.hideShareMenu(); // 隐藏右上角的分享按钮
      },
      onShareAppMessage: function () {
        if (this.data.cBook.bookId) {
          return {
            title: '推荐给你超好看的小说《' + this.data.cBook.bookName + '》',
            path: '/pages/jingxuan/jingxuan?bookId=' + this.data.cBook.bookId + '&form=share',
            imageUrl: this.data.cBook.iconUrlSmall
          }
        } else {
          return {
            title: app.globalData.shareTitle,
            path: '/pages/shelf/shelf',
            imageUrl: app.globalData.imageUrl
          }
        }
      },
    

    QQ小程序 web-view需申请开通权限

    1.开放对象
    仅面向非个人开发者开放,需二审核类目的暂不开放
    
    2.申请条件
    ① 合理使用 web-view,不影响用户体验,首页不能是 webview,页面 webview 占比总页面数(path)≤30%。
    ② 申请的跳转的域名有ICP备案。
    ③符合类目且无平台安全违规记录,如后续在使用中有违规行为平台将禁止接口能力。
    
    3.申请流程
    邮件标题:【web-view 能力】XX 小程序申请
    邮件格式:请写明申请原因\使用场景\小程序基础信息(包含 APPID+小程序名称+公司主体)发送邮件qq-miniprogram@tencent.com,
             审批通过的小程序会在3个工作日给予API配置。
    

    小程序无法打开应用宝、App Store。

    安卓手机—小程序web-view可以打开应用宝页面,并下载安卓apk。(前提是业务域名配置好应用宝域名。a.app.qq.comwxz.myapp.com
    IOS—无法下载.

    展开全文
  • 最近有个需要由于H5页面需要嵌套在微信小程序里面,所以H5的支付在小程序里面就行不通了。不过我看社区里面说的测试环境微信小程序webview引入H5是可以实现调取H5支付功能的,线上则调不起来。时间紧迫,咱也不敢...

    最近有个需要由于H5页面需要嵌套在微信小程序里面,所以H5的支付在小程序里面就行不通了。不过我看社区里面说的测试环境微信小程序webview引入H5是可以实现调取H5支付功能的,线上则调不起来。时间紧迫,咱也不敢尝试啊。只能另辟蹊径了,哈哈哈。

    借用一下大佬的视频来代替效果图 (为自己的懒找个说得过去的理由

    https://v.qq.com/x/page/t0913iprnay.html  

    注释:视频中的大佬使用的小程序支付,而我下面介绍的封装过的小程序支付。所以后面代码会有些许出入,可根据自己的业务需求,随时调整哈。 你品 你细品

    最终找到了这种方法:

    思路:小程序webview页面引入H5页面,并在H5页面点击支付按钮的时候跳转到微信小程序支付页面(wepay.js)然后再调起微信小程序原生页面即可 支付成功之后再回调到小程序的webview页面就好了(这里需要注意webview页面的src路径不要搞错了)

    由于ping++实现了多种支付功能的封装,所以我们只需要借助ping++的一个函数即可实现支付功能

    具体实现步骤请看:

    第一步我们小程序需要先有微信支付功能才能进行后续操作

     第二步骤需要先有个商户号

    链接地址:https://pay.weixin.qq.com/index.php/core/home/login?return_url=%2Findex.php%2Fextend%2Fpay_setting%2Fma

    第三步就是小程序和商户号关联的的步骤了 太过繁琐就不一一赘述了 大家看下面的微信官方流程吧

    链接地址:https://pay.weixin.qq.com/static/pay_setting/appid_protocol.shtml

    第四步就是下载我们需要用到的封装了多种风格支付的ping++了

    下载地址:https://download.csdn.net/download/qq_37949737/12850811

    第五步开始我们小程序代码的编写了

    具体页面结构如下

     

    下面开始上代码

    webview.wxml

    <web-view src="{{webUrl}}" bindload="getLoad" binderror="getError"></web-view>

    webview.js

    let url;
    
    
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        stateData:{
          webUrl: "",
        }
      },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        var that = this;
        wx.hideShareMenu();
        url = decodeURIComponent(options.url); //解密,解决参数携带问题
        that.setData({
          webUrl: url,
        })
      },
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
        let that = this;
        //配置这个以防webview页面的src路径丢失页面出现空白的情况
        if (that.data.webUrl == "undefined") {
          that.setData({
            webUrl: "配置自己需要跳转的H5页面首页即可", 
          })
        }
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function (res) {
        
      },
    
      //网页加载成功
      getLoad: function(e){
        let that = this;
        console.log("网页加载成功",e);
      },
    
      //网页加载失败
      getError: function(e){
        let that = this;
        console.log("网页加载失败",e);
      },
    })

    之后就是我们的重头戏了支付页面的代码

    由于我们使用的是weul的状态返回样式所以我们需要先引入weul样式(前面忘记说了,现补上weul.wxss是放在上面的style文件夹里面的,嘻嘻)

    wepay.wxml

    <view class="page" wx:if="{{payment_request}}">
    	<view class="weui-msg">
    		<view class="weui-msg__icon-area">
          <i wx:if="{{payment_success}}" class="weui-icon-warn weui-icon_msg"></i>
          <i wx:else class="weui-icon-warn weui-icon_msg"></i>
        </view>
    		<view class="weui-msg__text-area">
          <h2 wx:if="{{payment_success}}" class="weui-msg__title">支付成功</h2>
          <h2 wx:elif="{{payment_fail}}" class="weui-msg__title">{{payment_text?payment_text:"支付失败"}}</h2>
          <h2 wx:else class="weui-msg__title">已取消支付</h2>
    		</view>
    		<view class="weui-msg__opr-area">
    			<view class="weui-btn-area">
    				<view class="weui-btn weui-btn_primary" catchtap="sureBtn">确定</view>
    			</view>
        </view>
      </view>
    </view>

    wepay.js

    // pages/wePay/wePay.js
    
    
    let Pingpp = require("../../utils/pingpp.js");
    let request = require("../../utils/request.js");
    let config = require("../../utils/config.js");
    
    let app = getApp();
    
    
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        payment_success: false,
        payment_fail: false,
        payment_cancel: false,
        payment_request: false,
        payment_text: null,
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        wx.hideHomeButton({})
        console.log("webview传过来的参数:",options)
        let that = this;
        request.ajaxPost(config.DOMAIN_API.getCharge,{
          openId: app.globalData.userInfo.openid,
          taskId: options.taskId
        },{isLoading:false}).then((res) => {//成功处理
          if (res.success) { 
            console.log("获取charge对象:",res,"获取成功");
            Pingpp.createPayment(res.data, function (result, err) {
              console.log(result);
              console.log(err.msg);
              console.log(err.extra);
              if (result == "success") {
                //只有微信小程序 wx_lite 支付成功的结果会在这里返回
                that.setData({
                  payment_success: true,
                  payment_request: true,
                })
              } else if (result == "fail") {
                //charge 不正确或者微信小程序支付失败时会在此处返回
                that.setData({
                  payment_fail: true,
                  payment_request: true,
                })
              } else if (result == "cancel") {
                //微信小程序支付取消支付
                that.setData({
                  payment_cancel: true,
                  payment_request: true,
                })
              }
            });
          } else {
            console.log("获取charge对象:",res,"获取失败; 失败原因:",res.msg);
            that.setData({
              payment_fail: true,
              payment_text: "支付请求失败,请稍后重新尝试!",
              payment_request: true,
            })
          }
        }).catch((errMsg) => {//错误处理,已统一处理,此处可以不需要
        });
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      },
      //确定按钮
      sureBtn: function(){
        let that = this;
        //支付成功、支付失败、取消支付状态显示只有点击确定按钮需要返回的webview页面路径
        wx.redirectTo({
          url: "",
        })
      }
    })

    这就是我的小程序实现微信支付的完整流程,希望可以帮助到大家。有问题可以随时留言,或者微信找我

    微信号:15901281424

    展开全文
  • uni app 微信小程序分享 记录uni app 微信小程序分享功能 分享只需要将注意按钮的open-type设置为share 另外取消button的样式 button:after { border: none; } <button open-type="share"> <image src...

    uni app 微信小程序分享

    记录uni app 微信小程序的分享功能

    分享只需要将注意按钮的open-type设置为share

    另外取消button的样式

    button:after {
    	border: none;
    }
    
    <button open-type="share">
    	<image src="../../static/link.png" ></image>
    </button>
    

    其次就是定义分享的onShareAppMessage
    主要是title 分享的名字
    path 分享的路径 可以带上参数 方便解析
    imageUrl 分享图片的地址

    onShareAppMessage(res) {
      return {
    			title: `来自的分享`,
    			path: `/pages/index/index`,
    			imageUrl: 地址
    		 }
    }
    

    菜鸟前端 多多指正

    展开全文
  • 微信小程序

    2019-07-08 17:06:24
    微信小程序第一章---小程序微信生态圈第二章 第一章—小程序微信生态圈 2011年1月21日,腾讯公司推出一个即时通讯服务的免费应用程序,由张小龙带领的腾讯广州研发中心产品团队打造 张小龙(腾讯广州研发中心团队...
  • 这个分享按钮可能是小程序右上角原生菜单自带的分享按钮,也可能是开发者在页面中放置的分享按钮。具体的使用可以查看uni-app官网:https://uniapp.dcloud.io/api/plugins/share?id=onshareappmessage 例子: onSha
  • 今天我们来盘一下微信小程序当中从页面底部滑出的滚动选择器 picker组件 先把效果图给你们盘出来 接着开始写我们的布局喽 wxml <view class="clist_header"> <view class="clist_main"> <...
  • 小程序微信分享代码

    2019-12-25 17:03:47
    //分享 onShareAppMessage: function (res) { let that = this return { title: ‘分享的标题’, path: ‘分享的页面链接’, success: function (res) { //getSystemInfo是为了获取当前设备信息,判断是android还是...
  • 微信分享

    2017-11-10 15:00:00
    微信分享
  • 成都奥佩德科技有限公司面向成都地区用户推荐成都微信小程序开发,微信小程序开发,微信小程序开发公司,微信商城开发公司。 成都微信小程序开发公司哪家好,成都微信小程序开发费用多少,微信小程序定制需要多少钱? ...
  • 微信小程序、uni-app开发微信小程序、taro开发微信小程序基础知识 一、基本目录介绍 1.微信小程序 app.js ------ 小程序逻辑 app.json — 小程序公共配置(配页面路由、导航条、选项卡等页面类信息) app.wxss ---- ...
  • button class="fixed-text fixed-button" open-type="share" title="分享" hover-class="none">分享好友</button> js /** * 用户点击右上角分享 或点击按钮分享 */ onShareAppMessage: function() { /...
  • 微信小程序》彻底入门小程序

    千次阅读 多人点赞 2020-07-04 14:18:31
    微信小程序的火爆相信不用多说,作为一个前端,小程序几乎可以算得上是前端技能的一个加分项,如果找工作的时候会小程序,那么相对而言会有很多优势; 简介 官方解释:小程序是一种全新的连接用户与服务的方式,它...
  • 支付宝小程序、百度小程序微信小程序、今日头条小程序四大小程序对比分析,BAT小程序技术分析
  • 微信小程序canvas分享海报 这篇文章是我参考大佬的生成海报改了改的,相互学习 这里是原文链接:https://www.jianshu.com/p/6204e9d9b277 合理的创建标题,有助于目录的生成 直接输入1次#,并按下space后,将生成1级...
  • 申请一个微信小程序账号 在微信开发时,我们yx时候可能需要用到微信小程序微信小程序云开发需要使用注册的小程序appid,测试和游客进入是没有云开发的功能,所以我们需要注册一个微信小程序账号。在注册账号时要...
  • 经过多次重大更新,微信始终没有开放小程序直接分享到朋友圈的相关api。 曲线救国 我们直接开门见山,用间接的方式来实现微信小程序分享到朋友圈 这里先来罗列一下实现思路 通过微信api申请小程序二维码 获取...
  • 微信小程序和前端开发经验,纯属摸着石头过河,边学边干,花三周时间,完成了一个麻雀虽小五脏俱全的样品(具体内容不分享)。就是这么一个从0到1的过程,愿意分享出来,IT码农们共勉。 时间分配 首先看看在开发...
  • 微信小程序分享及其好友代付款

    千次阅读 2019-03-13 21:17:45
    微信小程序分享及其好友代付款 先贴一个微信的官方通告 大概的意思是说从2018年10月后的分享功能,取消了success,fail,complete三个函数的功能,用户分享必须是用户主动触发 首先还是还是说下走过的弯路,在...
  • 微信小程序分享功能 2020/07/28 声明:必须为button按钮 wxml <button data-name="shareBtn" open-type="share">转发</button> js //onShareAppMessage微信小程序自带函数 onShareAppMessage: ...
  • 微信小程序分享好友及分享朋友圈功能,功能很常见,记录下,方便今后查阅 一、上拉框显示分享按钮 1.1 wxml <van-action-sheet bind:close="shareClose" bind:cancel="shareClose" cancel-text="取消" title=...
  • 微信小程序自定义分享弹窗

    千次阅读 2018-08-23 17:28:18
    效果图: 多种触发条件使用同一个弹窗: ...--答案错误取消--> <!--答案错误确定--> <image src="../../images/wrongOk.png" mode="aspectFit"></image> ...
  • 微信小程序分享、转发”事件

    千次阅读 2019-06-25 13:32:59
    微信小程序“转发”功能 1、页内自定义分享 2、页面右上角“…”分享行为 当页面js上没有添加事件“onShareAppMessage”,右上角‘…’不会出现“转发”事件。 如果有事件,但是没有定义事件内容的话,转发的卡片则...
  • 微信小程序开发宝典:1微信小程序生命周期 参考文档:微信开放文档 一、App下的生命周期: 1、onLaunch:初始化完成时触发,只触发一次 例子: onLaunch: function () { console.log('初始化完成-只触发一次'); } ...
  • ▼▼▼导读在 2020 年的微信公开课上,微信官方宣布,小程序的重点目标是助力商家打造自己的商业闭环。而随着近期小程序热度的持续攀升,品牌零售商也纷纷强化了对这一重要自建渠道的重视。为此...
  • 微信小程序复选框以及全部取消 1.在wxml中先添加复选框和点击事件 <view class="all"> <checkbox class="q" bindtap="checkq" checked="{{isAll}}">全选</checkbox> </view> <view ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,604
精华内容 3,441
关键字:

微信分享取消小程序