微信小程序--云开发静态网站h5跳小程序
<p>微信小程序–云开发静态网站h5跳小程序<br>静态网站h5跳小程序</p><p>----首先需要开通小程序的静态网站功能</p>
<p>1.开通静态网站、绑定自定义域名，需要在「微信开发者工具 - 云开发 - 更多 - 静态网站」里进行，才能拥有免鉴权的能力。<br>(1) 打开小程序开发工具，点击云开发-设置-查看项目资源id<br>(2) 在微信官方文档上下载代码<br><img src="https://img2020.cnblogs.com/blog/1288888/202105/1288888-20210528102324701-160811899.png"></p>
<p>(3) 将下载下来的代码打开将html里面含有replace的地方修改成自己小程序的信息</p>
<p><img src="https://img2020.cnblogs.com/blog/1288888/202105/1288888-20210528102428171-581305842.png"></p>
<p> </p>
<p> (4) 将html文件上传到云开发控制台，打开小程序开发工具–云开发–更多–静态网站–上传文件</p>
<p><img src="https://img2020.cnblogs.com/blog/1288888/202105/1288888-20210528102458479-595953301.png"></p>
<p> </p>
<p> </p>
<p>(5) 开始写云函数，在上面的html中会调用。。。ps,微信小程序项目最先如果是非云开发项目，使用以下方法创建云函数。。。</p>
<p>在微信开发者工具上新建一个云开发项目，项目的appid要与自己项目的appid一致。</p>
<p><img src="https://img2020.cnblogs.com/blog/1288888/202105/1288888-20210528103053157-1311190297.png"></p>
<p> </p>
<p> </p>
<p><br>将之前下载html是文件里面cloudfunctions文件夹里面的public文件夹复制到新建的云开发项目的cloudfunctions云函数文件夹下面</p>
<p><img src="https://img2020.cnblogs.com/blog/1288888/202105/1288888-20210528102618433-1518702760.png"></p>
<p> </p>
<p> 将上面的public复制到下面</p>
<p><img src="https://img2020.cnblogs.com/blog/1288888/202105/1288888-20210528103159876-1069541484.png"></p>
<p> </p>
<p> (6) public里面的index.is就是云函数的入口文件。在里面写云函数的方法</p>
<p><em>这就要涉及到云函数的传参-----因为我们跳转小程序的时候都会穿一些参数去查询数据–例如详情页</em></p>
<ul>
<li>首先我们在html里面调用云函数，</li>
</ul>
<p><img src="https://img2020.cnblogs.com/blog/1288888/202105/1288888-20210528103349163-1724016518.png"></p>
<p> </p>
<p> 在云函数中接收参数</p>
<p><img src="https://img2020.cnblogs.com/blog/1288888/202105/1288888-20210528103415410-390712337.png"></p>
<p> </p>
<p> (7) 将写好的云函数上传。鼠标右键点击public函数，选择上传并部署</p>
<p><img src="https://img2020.cnblogs.com/blog/1288888/202105/1288888-20210528103736913-340254892.png"></p>
<p> </p>
<p> </p>
<p><br>上传以后在云开发控制平台的云函数列表里面，就会出现刚刚我们创建的public云函数了</p>
<p><img src="https://img2020.cnblogs.com/blog/1288888/202105/1288888-20210528103542553-217827526.png"></p>
<p> </p>
<p> 点击云函数权限–修改–允许所有用户访问–确定</p>
<p><img src="https://img2020.cnblogs.com/blog/1288888/202105/1288888-20210528103805791-1630764095.png"></p>
<p> </p>
<p> </p>
<p><strong><span style="font-family: "Microsoft YaHei"; font-size: 18px">综上就是所有步骤了</span></strong>，点击云函数–静态网站，之前我们上传的html，便会出现访问地址<br>复制出来就可以看大效果了（或者直接访问域名）</p>
<p><img src="https://img2020.cnblogs.com/blog/1288888/202105/1288888-20210528103946501-1902196174.png"></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><span style="font-family: "Microsoft YaHei"; font-size: 18px"><strong>补充：</strong></span>如何跳转的 页面需要根据参数显示内容时，在html 页面中的wx-open-launch-weapp 标签上面的path写成动态的。（首先在标签上绑定一个id，在等页面加载完成后设置path ）</p>
<div><img src="https://img2020.cnblogs.com/blog/1288888/202105/1288888-20210528104652971-1438808236.png">
<p> </p>
<p> </p>
</div>
<p> </p>
<div>
<div> //获取url 上面的参数 </div>
<div> function getUrlData() {</div>
<div> var url = window.location.search;</div>
<div> console.log('url',url)</div>
<div> let dataObj = {}</div>
<div> if (url.indexOf("?") != -1) {</div>
<div> var str = url.substr(1);</div>
<div> var strs = str.split("&");</div>
<div> for (var i = 0; i < strs.length; i++) {</div>
<div> dataObj.split("=")] = decodeURI(strs.split("="));</div>
<div> }</div>
<div> }</div>
<div> let btn = document.getElementById('launch-btn')</div>
<div> let path = '/pages/shop-car/product-detail/product-detail?id='+dataObj.id;</div>
<div> btn.setAttribute('path',path);</div>
<div> btn.addEventListener('launch', function (e) {</div>
<div> console.log('success',e);</div>
<div> });</div>
<div> btn.addEventListener('error', function (e) {</div>
<div> console.log('fail', e.detail);</div>
<div> });</div>
<div> </div>
<div> }</div>
<div> // 页面加载完成事件</div>
<div> window.onload=function(){ </div>
<div> console.log("页面加载完成！"); </div>
<div> getUrlData()</div>
<div> } </div>
</div>
<p> </p>
<p><br>原文链接：https://blog.csdn.net/hlc162181/article/details/113502356</p>
<p> </p><br><br>
来源：https://www.cnblogs.com/hemei1212/p/14821249.html
頁:
[1]