精华内容
下载资源
问答
  • 项目采用微信小程序工具原生开发,适用于附近餐饮行业小程序在线点单等相关行业使用。 项目经过实际项目测试并使用可放心下载。
  • 微信小程序h5页面分享设置

    千次阅读 2020-07-02 21:26:41
    前言(废话): 最近开发新项目,因为公司希望能在开发完h5后顺便吧微信小程序也上了,但是人力有限,只能做到h5,开发小程序压根做不到,只能投机了, 我真是个机灵鬼。。。 然后我就看API,咦,贼拉简单,一。使用web...

    前言(废话): 最近开发新项目,因为公司希望能在开发完h5后顺便吧微信小程序也上了,但是人力有限,只能做到h5,开发小程序压根做不到,只能投机了, 我真是个机灵鬼。。。

    然后我就看API,咦,贼拉简单,一。使用web-view标签嵌入网页,后台配置合法域名,二,使用postmessage通信,然后保存地址就好了。。。代码如下:

    <template>
      <div class="index">
        <web-view :src="path" @message="message"></web-view>
      </div>
    </template>
    
    <script>
    import { url } from '@/config.js' // 网站url
    export default {
      name: 'index',
      data() {
        return {
          
          path: url ,
          title: '这个人很帅',
          shareData: null, // 保存分享的数据
          url,
        }
      },
      methods: {
        message (e) { // 监听message事件
          let { data } = e.mp.detail
          console.log('message', data)
          this.shareData = JSON.parse(data.pop())
        }
      },
      // 调用分享的时候出发
      onShareAppMessage(options) {
        let { path, title, shareData, imageUrl } = this
        let params = {
          title
        }
        if (shareData) {
          title = shareData.title
          path = shareData.path
          imageUrl = shareData.imageUrl
        }
    
        return {
          title,
          path: `pages/index/main?path=${path}`,
          imageUrl,
          success: function (res) {
              // 转发成功
            wx.showToast({
              title: "转发成功",
              icon: 'success',
              duration: 2000
            })
          },
          fail: function (res) {
              // 转发失败
          }
        }
      },
      onLoad(options) {
        // 这里主要是当用户打开界面的时候,需要解析是否跳转到指定页面
        console.log('h5 load', options, this.url)
        if (options.path) {
          this.path = `${this.url}${options.path}`
          console.log('options', options)
        }
      }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped lang="less">
    .index{}
    </style>
    
    

    h5也页面代码

    /**
     * @desc 设置微信小程序分享
     */
    let miniProgramShareInfo = (params = {}) => {
      
      if (window.__wxjs_environment === 'miniprogram') {
        let path = window.location.href
        let title = window.document.title
        let sharInfo = {
          imageUrl: '',
          title,
          path,
          ...params
        }
        console.log('sharInfo', sharInfo)
        // 判断,如果是在小程序内部就发送一个msg给界面
        wx.miniProgram.postMessage({ data: JSON.stringify(sharInfo)})
        
        // 据说能触发事件,虽然我没测试出来,先放着
        wx.miniProgram.navigateBack()
    
      }
    }
    
    

    我以为上边这么写就好了,结果发现是我太年轻,发现分享后打不开界面。。。

    然后进入debugger模式。开始寻找问题。。。

    第一步: h5页面打印地址,对的,参数也ok,

    第二步:小程序界面解析参数,也是对的。

    第三部:重新调用,结果还是失败,然后我进入了死循环,一直各种尝试,最后的最后,发现居然需要我先用一个完整的地址,然后再加上path才可以。。

    总结

    通过上边的调试,发现文档只有参考价值,没有权威,博客。论文都没有,我这里主要做个笔记,方便后期排查,

    关于调试,使用vsconsole,然后就是当我们使用网页的时候,没法查询入口参数,这里需要在微信开发者工具右键,开发工具的左上角就会出现一个调试按钮,打开会有一个调试面板,方便看参数。分享的时候只能通过手机,这个时候就会无法查看参数,真机调试,重新进入小程序会断开链接。。。最后的最后,说一句,珍爱生命,原理微信生态圈

    展开全文
  • 微信小程序H5测试打包详解

    千次阅读 2019-08-04 23:41:02
    H5测试打包详解 要打包的项目根目录运行:npm run build:h5 2、全局安装express输入:npm install -g express 3、新建一个文件夹,并在其根目录初始化 4、在新建目录里面新建一个index.js文件并将要打包...

    H5测试打包详解

    1. 要打包的项目根目录运行:npm run build:h5

    2、全局安装express输入:npm install  -g  express

    3、新建一个文件夹,并在其根目录初始化

    4、在新建目录里面新建一个index.js文件并将要打包项目的dist文件拷贝过来

    5、新建文件夹根目录输入:node index启动服务

    6、本地启动

    7、用360免费WIFI或者猎豹开启电脑WIFI,手机连上WIFI后输入ip地址加项目名即可在手机端访问H5

     

    展开全文
  • 最近在搞h5授权登陆获取code后请求access_token中间报{“errcode”:40163,“errmsg”:“code been used, hints: [ req_id: jHIcuUore-S9_yQA ]”}百度了好久没发现解决放法,再一看报错原因code been used提示我使用...

    最近在搞h5授权登陆获取code后请求access_token中间报{“errcode”:40163,“errmsg”:“code been used, hints: [ req_id: jHIcuUore-S9_yQA ]”}百度了好久没发现解决放法,再一看报错原因code been used提示我使用过code再一看代码原来我在前端请求使用过一次code。把前面请求测试注释后再到postman测试发现能获取数据。再刷新一次又报原来错误。应该每个code只能使用一次

    展开全文
  • H5UI for weApp H5UI微信小程序 []()
  • 微信内打开H5页面,选择跳转任意微信小程序
  • 1.微信小程序、微信公众号、H5之间相互跳转
    展开全文
  • 最近有个需要由于H5页面需要嵌套在微信小程序里面,所以H5的支付在小程序里面就行不通了。不过我看社区里面说的测试环境微信小程序webview引入H5是可以实现调取H5支付功能的,线上则调不起来。时间紧迫,咱也不敢...
  • 本篇博文将从业务选型,微信小程序后台配置,使用 web-view 完成登录业务以及在实战中如何调试一次性带你感受小程序内嵌 H5 的风采,帮你更有底气的使用微信小程序新组件 web-view。   技术选择 H5 转成小程序方案...
  • 需求:从外部浏览器,点击H5链接跳转打开微信小程序;以及在微信内直接点击H5链接打开微信小程序; 步骤1:小程序开发需要使用云开发创建项目,使用云开发生成的项目会自带云函数文件夹; 步骤2:项目开启云开发 ...
  • 公众号回复“领取资源”,领取300G前端,Java,产品经理,微信小程序,Python等资源合集大放送,让我们一起学前端。 一、小程序和公众号相互关联 在微信公众号里可以添加小程序。 图片描述 图片有点小,我把...
  • 微信小程序、微信公众号、H5之间能相互跳转吗? 原作者:娇娇jojo 时间:2018年1月22日 话不多说,直接进入正文。 一、小程序和公众号 答案是:可以相互关联。 在微信公众号里可以添加小程序。 图片有点小...
  • 一个基于Web-View的H5微信小程序源码,提交代码进行审核就可以在公开环境使用,小程序名称和图标也可以在开发者账号里面提交。
  • 为了这个问题,于是我就去看了下微信的文档,发现微信有这个接口的,可以让微信浏览器下的H5跳转到小程序内。微信相关文档在这边:在h5界面中的配置wx.config({debug: true, // 开启调试模式,调用的所有api的返回值...
  • 这篇文章主要介绍了微信小程序H5页面间相互跳转代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.微信小程序跳转小程序 wx.navigateToMiniProgram ...
  • 微信公众号里可以添加小程序。 图片有点小,我把文字打出来吧: 可关联已有的小程序或快速创建小程序。已关联的小程序可被使用在自定义菜单和模版消息等场景中。 公众号可关联同主体的10个小程序及不同主体的3...
  • 1.引用JS <...<...2.在js里面调用wx.miniProgram.redirectTo,其中url是你要跳转的小程序页面地址 <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.j
  • web-view组件简单使用 1. web-wiew官方文档 ...会自动铺满整个小程序页面,个人类型的小程序暂不支持使用。 pages/baidu/baidu.wxml <web-view src="https://www.baidu.com/"> </web-view
  • 微信小程序跳转h5页面

    千次阅读 2019-08-15 20:38:37
    可以打开h5页面微信小程序<web-view>官网地址 属性 类型 默认值 必填 说明 最低版本 src string 否 webview 指向网页的链接。可打开关联的公众号的文章,其它网页需登录小...
  • 1.在项目中安装微信sdk npm install weixin-js-sdk
  • 微信小程序H5相互跳转和传递数据

    万次阅读 2018-12-04 19:35:09
    微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 这是小程序和web-vew的H5相互传参,H5使用小程序的微信支付的代码 H5部分 <!DOCTYPE html> <html> <head> <...
  • H5运行在浏览器上,微信小程序运行在一个基于浏览器内核完全重构的内置浏览器 2. 兼容性 H5兼容性很多,微信小程序基本没有 3.读取系统权限 微信小程序读取系统权限,H5一般不会 4.运行流畅度 小程序的流畅性...
  • 校园失物招领微信小程序+H5+后台管理源

    万次阅读 多人点赞 2018-10-28 23:26:23
    失物招领主要包括了微信小程序端,微信公众号wap端,后端管理。 小程序,wap端主要包括失物信息发布,失物认领,短信认证,自动屏蔽广告。 关键技术:ThinkPHP3.2 ,JQuery,Angular,MySql,Restful Api ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 24,420
精华内容 9,768
关键字:

微信小程序h5

微信小程序 订阅