精华内容
下载资源
问答
  • 微信公众号h5开发流程
    2021-10-24 11:08:39

    甲方:

            1、申请公众号服务号,主体认证

            2、域名解析和备案等,主体信息,微信交互要求域名https:及配置ssl证书

            3、购买服务器

    乙方:

            1、域名配置和解析等

            2、公众号配置和开发等,公众号菜单可以手动配置也可以代码设置,

                    (1)、手动设置:公众号菜单自定义

                    (2)、代码设置:配置公众号服务器(服务器域名提供一个验证微信请求的接口CSDN)- > 获取access_token -> 使用python创建微信公众号菜单

    获取access_token:微信开放文档

    import requests
     
    appid = "你的公众号appid"
    secret = "你的公众号secret"
    url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" + appid + "&secret=" + secret
    headers = {'Content-type': 'application/x-www-form-urlencoded'}
     
    response = requests.post(url ,headers=headers)
     
    print(response.content.decode())

    创建公众号菜单:微信开放文档

    
    import json
    import http.client
     
    # 获取token GET方法
    # https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=你的appid&secret=你的secret
     
    token = "获取的token"
     
    # https://api.weixin.qq.com/cgi-bin/menu/create?access_token=ACCESS_TOKEN
    connection = http.client.HTTPSConnection('api.weixin.qq.com')
     
    data = {
        "button": [
            {
                "type": "view",
                "name": "官网",
                "url": "http://www.yundeeiot.com/"
            },
            {
                "name": "服务授权",
                "sub_button": [
                    {
                        "type": "view",
                        "name": "授权应用",
                        "url": "http://www.yundeeiot.com/"
                    }
                ]
            },
            {
                "type": "view",
                "name": "关于我们",
                "url": "http://www.yundeeiot.com/page/company.html"
            },
        ]
    }
     
    headers = {'Content-type': 'application/json'}
     
    connection.request('POST', '/cgi-bin/menu/create?access_token=' + token + '',json.dumps(data, ensure_ascii=False).encode('utf-8'), headers)
    response = connection.getresponse()
    str1 = response.read().decode('utf-8')
     
    print(str1);

         

    更多相关内容
  • 微信公众号h5页面制作,微信公众号H5吸粉模板源码 。源码参考链接:www.pikao.cn
  • 使用uniapp开发微信公众号H5页面),用微信开发者工具调试微信公众号 1、根据官网文档,新建入口文件template.h5.html 官网文档 template.h5.html 直接复制过来就可以 <!DOCTYPE html> <...

    参考文档:
    使用uniapp开发微信公众号(H5页面),用微信开发者工具调试微信公众号

    1、根据官网文档,新建入口文件template.h5.html

    官网文档
    template.h5.html 直接复制过来就可以

    <!DOCTYPE html>
    <html lang="zh-CN">
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <title>
                <%= htmlWebpackPlugin.options.title %>
            </title>
            <!-- Open Graph data -->
            <!-- <meta property="og:title" content="Title Here" /> -->
            <!-- <meta property="og:url" content="http://www.example.com/" /> -->
            <!-- <meta property="og:image" content="http://example.com/image.jpg" /> -->
            <!-- <meta property="og:description" content="Description Here" /> -->
            <script>
                var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
                document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
            </script>
            <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
        </head>
        <body>
            <noscript>
                <strong>Please enable JavaScript to continue.</strong>
            </noscript>
            <div id="app"></div>
            <!-- built files will be auto injected -->
        </body>
    </html>
    

    2、配置mainifest.json

    在这里插入图片描述

    3、hbuilder运行chrome

    4、把运行地址复制到微信开发者工具地址栏就可以进行测试了,选择微信公众号网页调试,可以进行热更新

    工具栏-微信开发者工具-更换开发模式-公众号网页调试

    展开全文
  • 结合这一需求,本期分享的内容是如何开发交互式SVG,并嵌入微信公众号正文页。设计师和前端开发同学都可以来学习下。学会了可以接这方面的私活了,短平快地赚小钱钱。 先看下最终SVG交互效果: (体验公众号正文页...
  • 我们经常会见到在一些微信公众号上有h5的页面链接,点击阅读给人的体验很不错,但是很少有朋友知道微信公众号添加h5页面模板的操作方法,今天小编就给大家分享一下微信公众号添加h5页面模板的操作方法是什么?...

    我们经常会见到在一些微信公众号上有h5的页面链接,点击阅读给人的体验很不错,但是很少有朋友知道微信公众号添加h5页面模板的操作方法,今天小编就给大家分享一下微信公众号添加h5页面模板的操作方法是什么?希望可以帮助亲们去了解微信公众号的相关信息,想知道的朋友,可以随着小编一起来看看的哦。

    方法一:图文信息原文链接处添加作品链接

    1、登录微信公众号,打开“素材管理”,点击右侧界面的“+”号按钮,新建图文信息;

    2、编辑完信息后,在图文信息底部【原文链接】处添加作品链接,然后点击保存。除此之外,微信公众号添加h5页面模板的操作方法还有其他的吗?

    方法二:公众号自定义菜单链接作品

    1、登录微信公众号,打开【自定义菜单】功能;

    2、选择和设定【回复类型】;

    3、将作品链接完整的粘帖到回复内容中。

    05a8691c46e6a71c367c8ce79f24bf58.png

    方法三:利用文本超链接功能,在微信公众账号设置自动回复时推广图说作品。

    1、设置文本超链接(通过自动回复实现)

    小图图给大家解释如何使用HTML代码实现文本超链接:这里放置展示用的文本,

    实例如下:

    将这段“尚都比拉时尚女装”修改和粘贴到群发消息中,消息自动回复(群发信息不支持安卓系统)

    对于这篇针对“微信公众号添加h5页面模板的操作方法是什么?”问题的分析,不知道大家阅读后是不是已经有所了解了呢。若是认真阅读了这篇文章,相信不会操作的亲们,根据文章介绍的步骤操作,就可以实现自己制作微信公众号h5链接的页面了哦。如果亲们还想了解更多关于这方面的资讯,欢迎登录开淘网查询浏览和阅读。

    推荐阅读查看更多相似文章

    展开全文
  • 一、背景 由于本人平常开发的都是一些PC端后台管理系统、移动端等等,微信小程序、公众号接触较少,接触也是协同开发,今天头一次要将本地开发的H5发版成公众号并且... 当前我开发的页面是用vue写的h5页面,经过这...

    一、背景

            由于本人平常开发的都是一些PC端后台管理系统、移动端等等,微信小程序、公众号接触较少,接触也是协同开发,今天头一次要将本地开发的H5发版成公众号并且测试。可把我难为坏了(各种环境、各种申请、各种跨域问题),不停的百度他人的经验,也不停的翻阅微信官方文档,但由于是第一次,写起来还是比较头疼,也遇到了很多坑。现在终于搞定,于是决定将这些问题记录下来,以后忘了可以来看看,也给其他第一次做公众号的提供一些经验~

    二、步骤

            当前我开发的页面是用vue写的h5页面,经过这次发版,我总结了几个步骤如下:

    1、微信环境绑定

    2、代码三段(前端:判断环境、截取、申请获取用户信息) 

    3、本地跑起服务,将微信提供的白名单文件放入项目根目录

    1.微信环境绑定

    首先,需要公司在公司申请的微信测试号上,将你加入公司微信开发权限。然后,下载微信官方提供的软件:微信开发者工具,点开以后我们选择公众号,如下图:

    这时我们需要一个域名,这个域名是你本地资源的域名,一般开发时有需要,公司都会帮你申请的(当然如果你要部署到正式环境也是可以的,只是这样在开发时,有一点改动就要麻烦运维人员重新给你部署,只要人家不打你,可以这么做),申请好域名后,需要让公司管理人员在微信管理平台上,将你申请的域名添加到白名单中,这样你在微信开发工具打开时,就属于微信环境,可以调微信的API啦!(但是在添加时,需要在你项目根目录放一个官方提供的txt文件,这个我后面第三步会说到)

    打开以后在头部会有一个URL栏,你输入你要进入的URL链接就ok!

    2、代码三段

    这个是前端代码中最重要的部分,分为三部分:

    第一部分

    // 判断是否为公众号模拟器环境

    const isWechat = () => {
    
      return (
    
        String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) ===
    
        "micromessenger"
    
      );
    
    };

    这部分只会返回true或false 走true就证明是当前是微信环境

    第二部分

    // 判断公众号截取code

    const getUrlParam = name => {
    
      let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    
      let r = window.location.search.substr(1).match(reg);
    
      // console.log(1);
    
      if (r != null) {
    
        return unescape(r[2]);
    
      }
    
      return null;
    
    };

    这部分代码用于在用户允许微信授权后,截取微信返回给你的用户code(后续可以用这个code去获取其他用户信息,例如:openid等)。

    第三部分

    if(!isWechat()){
    
            console.log('当前不处于微信环境,请用微信环境打开');
    
          }
    
          if (isWechat()) {
    
            let appid = "xxxxxxxx"; //为测试号id
    
            let secret = "xxxxxxxxxx"  // 测试号的appsecret,一般后端用,为了记录我在此处写上了,如果需要,则要找微信公众平台管理员要这个appsecret
    
            let code = getUrlParam("code"); //是否存在code
    
            let local = window.location.href; // 第一步中获取的域名
    
            if (code == null || code === "") {
    
              //不存在就打开上面的地址进行授权
    
              // encodeURIComponent(local)
    
              window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(
    
                local
    
              )}&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect`;
    
            } else {
    
              console.log("*****************截取用户的code:",code);
    
              // 此处已经拿到了用户 code 接下来用这个code去调后端的接口,拿到其他信息及token
    
            }
    
          }
    
        },

    如图,到这里,基本上就已经能拿到想要的数据了。但是我上面也说了,我是通过将我自己的主机作为服务器,单独起了一个web服务来进行调试的,所以有了第三步。也记录一下如何操作。

     3.本地跑起服务,将微信提供的白名单文件放入项目根目录

    由于我是将自己的主机作为服务器,所以想跑服务,要先安装第三方依赖http-server

    安装node-js ---> npm install http-server -g --->  使用 http-server 启动本地服务,命令为:  hs -o -p 80(端口号) --- > ctrl + C 停止服务

    此时要先将你的H5页面 npm run build 打一个包,在打包的根目录中,放入微信要求的txt文件

    然后在根目录运行 hs -o -p 80 

     

    这样就是运行成功了。 这时打开图中的http地址就可以访问到你的项目路径。

    接下来就去微信开发者工具获取用户信息就可以啦!

    展开全文
  • 最重要的是配置成手机端页面也就是h5页面: vue项目中在index.html中配置 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> (function (doc, ...
  • 公共号开通其实很简单,推广的方式也已经模式化,这些无需多述,这里我们从技术的角度来看看一个技术人员完成一个带有H5页面“会员中心”的公众号的流程。公众号的三个类别 如果您的公众号需要经常性的推送群发...
  • 微信公众号平台 2.WPS的秀堂H5 3.在线二维码解码器 二、步骤 1.登录“微信公众平台”--> 左侧“设置”中的“公众号设置” --> 下载一个公众号的二维码。 2.百度“二维码解码器”--> 打开在线...
  • 在设置好微信公众号自定义菜单中,某一个菜单点击动作为发送消息后,想将这个点击动作换成跳转到网页,在原来的基础上修改,是不成功的。以下是小编为您带来的关于微信公众号自定义菜单将点击动作换成跳转到网页,...
  • 实现思路 1.利用手机的前置摄像头获取视频流 2.利用第三方插件tracking.js捕获人脸部分 3.捕获到人脸后利用canvas绘制带人脸的照片(业务需要:转为base64编码) 4.将绘制带人脸的照片和其他数据上传到第三方校验...
  • 做但是市面上的公众号排版编辑器层出不穷,到底哪一款最好用呢?下面就带来主流公众号排版编辑器的对比,看下最受欢迎的编辑器中,哪款最好用吧。1、秀米编辑器秀米编辑器可以说是一款比较受欢迎的公众号排版编辑器...
  • 微信公众号页面模板是最近公众号推出的功能哦,这个功能可以解决管理员不少的麻烦呢,很多的公众号都开通了这个功能,就算你开通了这个功能,你也要学会使用哦,企业微信公众号页面模板使用的方法是什么呢?企业微信...
  • 在做的微信公众号小项目中微信公众号页面无法唤起输入框? 遇到这个问题,找了好久,最后才锁定这是微信自带的X5内核才出现的bug 1.调起调试页面 通过链接直接进入http//:debugtbs.qq.com 2.进入调试页面...
  • uniapp开发微信公众号也就是H5,但是微信公众号在做用户管理(需要登录,获取用户信息等需要微信号的openId),作为一个入门小白,真是困难重重。翻看微信公众号官方文档,知道微信公众号对网页授权有两种方式:一种是...
  • 为了实现微信公众号生成专属二维码推广来源统计功能,第三方平台微号帮提供了渠道二维码生成功能实现,可以给微信公众号在线生成专属推广二维码,统计公众号各个渠道来源的粉丝,一个渠道对应一个推广二维码,可以...
  • 一个超级简单有效的恶搞小游戏,是一个用于微信公众号吸粉引流的工具,查了网上也有很多引流方法,抽签、算命、健康测试之类的太多了。今天和大家分享的是通过恶搞加群类型小游戏吸粉引流的方法。 作用 是一个为...
  • 对于设置微信公众号关注后自动回复多条图文链接,第三方平台微号...微信公众号关注延迟推送消息功能,支持粉丝关注后公众号自动回复消息,可以设置回复粉丝图文、链接、文字、图片、文章、视频、语音、小程序、h5页面
  • 微信H5微信公众众号图文制作

    千次阅读 2019-11-28 19:57:25
    微信H5微信公众众号图文制作 今天花了5个小时,把maka H5制作微信订阅号的群发图文编辑 搞清楚了 眼睛充血中,修图太费眼睛 H5有很多模板,除了maka还有其他的一些平台,如果不太追求质量和创新就可以直接用...
  • 微信中下载app共有两种实现方式,然而安卓手机跟苹果手机还尽然不同。 1.苹果用户打开后要么自动调起App Store下载(前提是你的应用在苹果商店上架了);要么是去Safari下载。 2.安卓用户打开链接后要么直接下载...
  • 根据微信内部跳转接口规则调整如下: URL Scheme功能规则调整 path参数不能携带query,带“?”都将报错 query从32个字符扩展到128个字符 Scheme字符缩减,新的Scheme格式为 weixin://dl/business/?t=
  • 1、H5跳转小程序。function myfun(){var openid = "=$_SESSION['openid']?>";wx.miniProgram.navigateTo({url:"/pages/identity/identity?openid="+openid});...PHP微信公共号H5支付。1.接受支付信息. /...
  • 微信公众号---H5跳转小程序、拉起微信扫一扫、扫一扫绑定关系逻辑实现微信公众号使用 wx-open-launch-weapp 开放标签跳转小程 微信公众号使用 wx-open-launch-weapp 开放标签跳转小程 注意事项: 微信开放标签有最低...
  • 自从走上微信运营的不归路之后,每天都离不开和微信编辑器打交道,市面上这么多款,到底哪款最好用?...2、秀米微信编辑器操控难度:☆模板推荐:★★★H5页面:自带其他:免费综合测评:1、秀米2.0排...
  • 自己公众号里的文章数量太多,不知道该怎么整理?数据太多,找起来又不太方便。比如我有一个在婚庆行业做小编的伙伴,他们的公众号里都会不定期的推送一些不同系列的婚纱照风格,时间长了文章数量也很多,当给客户...
  •  在微信公众号开发中,有时需要对浏览器左上角返回按钮进行拦截处理相关的页面逻辑,而并不是让页面直接返回上一页,之前在这个细节点上的一直实现得不是很好。但看到京东购物公众号上的效果却实现得非常好,所以...
  • 使用viewport使页面禁止缩放。 通常把user-scalable设置为0来关闭用户对页面视图缩放的行为。 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">...
  • h5网站网页】H5设计原稿的切图是什么尺寸的,是微信公众号版的?主流HTML5移动网络开发框架?下面就和小编一起来看看吧!H5设计原稿的切图是什么尺寸的,是微信公众号版的?前沿的Photoshop具有与Sketch相同的输出切割...
  • 微信H5网页公众号支付教程附demo

    万次阅读 多人点赞 2016-11-23 17:40:08
    微信H5网页公众号支付教程附demo开发之前请详细阅读微信公众号支付开发文档,并配置好服务器信息。 微信支付开发文档1.微信支付申请,开通微信商户平台。 2.开发配置,填写服务器地址。 3.在开发电脑上安装证书...
  • 微信公众号运营工具汇总

    千次阅读 2018-05-20 23:47:00
    免费H5页面制作工具大汇总: 易企秀:eqxiu.com 易企微:www.e7wei.com 兔展:www.rabbitpre.com MAKA(场景):www.maka.im/home/index.html 秀多多:xiudodo.com live:www.liveapp.cn 初页:...

空空如也

空空如也

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

微信公众号h5页面制作