本文主要是介绍h5 拉起小程序，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

前提是公众号必须是认证过的服务号！！！

h5 端：

.1 下载安装包

yarn add weixin-jsapi

yarn add weixin-js-sdk

jweixin-1.6.0.js 必须是这个版本 低于这个的版本不支持那个开放标签

weixin-jsapi 至于这个包 是用来导出 wx 的 从 sdk 里面导出无效

.2 导入

importwxfrom"weixin-jsapi"

import"weixin-js-sdk"

.3 权限验证

 /*
  	@params
  	url：当前需要使用开放标签的页面的url  注意 是前台页面路径 不是域名路径 如：        
    http://testxxx.xxx.com/fileview
  	openTagList： ["wx-open-launch-weapp"]  代表此标签拉起的是小程序 还是app
   */

  /*
   需要在对应的公众号配置接口域名  配置的时候 只需要写后面的即可  不需要写http这个东西 如：        
   xxx.xxx.com/
   */

getWxConfig() {
    util.getYangAxios(
      api.wxConfig,
      {
        url: viewFile,
        openTagList: this.state.openTagList,
      },
      async (res) => {
        // console.log("res----", res)
        // 请求后台接口拿到 data信息
        wx.config({
          debug: false,
          appId: res.appId, // 必填，此处不是小程序的appid，而是公众号的唯一标识，公众号必须是服务号，
          timestamp: res.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.nonceStr, // 必填，生成签名的随机串
          signature: res.signature, // 必填，签名
          jsApiList: ["downloadFile",], // 必填，需要使用的JS接口列表
          // openTagList配置可使用的开放标签,
          openTagList: ["wx-open-launch-weapp"],
        })

        wx.ready((res) => {
          console.log("res-ready---成功", res)
        })

        wx.error((res) => {
          console.log("res-config---失败", res)
        })
      },
      (err) => {
        console.log(err)
      }
    )
  }

.4 书写html结构

 {/*
     username：小程序的原始id
     env-version：拉起小程序的版本
     path:'跳往小程序的页面路径'
     注意此处的样式需要行内样式
   */}

   <div className={"wx_open_view"}>
            {/* 拉起正式版release、开发版develop、体验版trial */}
            <wx-open-launch-weapp
              id="launch-btn"
              username="gh_547f4f21434e"
              path={`/view/F/pages/filetransfer/filetransfer.html? 
                fname=${filename}&furl=${fileurl}&ftype=${filetype}`}
              style={{
                position: "absolute",
                top: 0,
                left: 0,
                width: "100%",
                height: "100%",
              }}
              env-version="release"
            >
              <script type="text/wxtag-template">
                <Button
                  style={{
                    display: "block",
                    width: 310,
                    height: 46,
                    borderRadius: "46px",
                    lineHeight: "46px",
                    color: "#fff",
                    boxShadow: "0px -1px 13px 0px rgba(90,148,254,0.41)",
                    background: "#508afc",
                    textAlign: "center",
                    margin: "12px auto 6px auto",
                  }}
                >
                  打开文档
                </Button>
              </script>
            </wx-open-launch-weapp>
    </div>

小程序端：

首先要有一个中转页 用来接受参数 和显示加载中

然后跳往指定的页面 在中转页 用 onl oad 即可获取参数

wx.hideHomeButton({ success: (res) => {}, })

    wx.setNavigationBarTitle({
      title: '文件浏览',
    })

wx.reLaunch({url: `/view/F/pages/fileview/fileview?fname=${query.fname}&furl=${query.furl}&ftype=${query.ftype}&isCanLook=${isCanLook}`,})

在指定的页面也是 不需要返回按钮 直接让返回小程序首页即可
如果不让显示返回首页按钮的话 点击右上角也可以直接推出小程序 
但是在没有结束微信后台的时候短时间内在打开小程序  还是文件浏览页面 并且无法返回
所以还是要有返回首页的按钮 除非是一个专门的查看文件的小程序 没有其他内容

这篇关于h5 拉起小程序的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！