为了便于开发者灵活配置小程序,微信小程序开放了内嵌网页能力。这意味着小程序的内容不再局限于pages和large,我们可以借助内嵌网页丰富小程序的内容。下面附上详细的开发教程(含视频操作以及注意事项)

一、小程序内嵌网页web-view教程


1) 微信公众平台,登录小程序账号

2) 左侧-设置-开发设置-业务域名-配置

3) 小程序管理员微信扫码

4) 填写小程序业务域名,域名需ICP备案

5) 下载校检文件上传至服务器指定目录,保存

6) 小程序业务域名配置完成

7) 打开微信开发者工具,添加小程序项目

8) 进入小程序调试,点击底部导航-外链页page10001,右侧找到page10001.wxml,删除原有代码,插入<web-view src=“业务域名/网页.html”></web-view>
备注:此处外链页为空白页,便于借助webview组件插入网页内容作对比

9)ctrl+s保存查看小程序内嵌网页得内容
备注:此处开发者需更新到教程库版本1.6.4

二、小程序web-view注意事项


1)业务域名需ICP备案,新域名备案24小时后即可配置,域名不支持IP地址及端口号

2)下载校检文件,上传至服务器指定根目录

3)开发者工具最新版-基础库版本1.6.4

三、附上本次小程序web-view内嵌网页视频教程


webview视频演示: https://www.zhihu.com/question/67564075/answer/258773999

[小程序开发] 微信小程序内嵌网页web-view开发教程的更多相关文章

  1. 关于微信公众号内嵌网页的几个meta标签

    最近在做微信公众平台内嵌app,其实也就是web app="=,不过就是基于微信内置浏览器(safari加了一个WeixinJS对象),稍微记一下几个html的meta标签(web app通 ...

  2. WPF内嵌网页的两种方式

    在wpf程序中,有时会内嵌网页.内嵌网页有两种方法,一种是使用wpf自带WebBrowser控件来调用IE内核,另一种是使用CefSharp包来调用chrom内核. 一.第一种使用自带WebBrows ...

  3. 微信小程序内嵌网页能力开放 小程序支持内嵌网页文档说明

    为了方便开发者灵活配置微信小程序,张小龙现在开放了小程序的内嵌网页功能,这是一个非常大的惊喜啊,以后意味着你只要开放一个手机端网站,就可以制作一个小程序了哦.操作方法1.开发者登录微信小程序后台,选择 ...

  4. 开发微信小程序中SSL协议的申请、证书绑定、TLS 版本处理等

    在上篇随笔<基于微信小程序的系统开发准备工作>介绍了开发微信小程序的一些前期的架构设计.技术路线 .工具准备等方面内容,本篇随笔继续这个步骤,逐步介绍我们实际开发过程中对SSL协议的申请及 ...

  5. 用Vue.js开发微信小程序:开源框架mpvue解析

    前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...

  6. 使用mpvue开发微信小程序

    更多内容请查看 我的新博客 地址 : 前言 16年小程序刚出来的时候,就准备花点时间去学学.无奈现实中手上项目太多,一个接着一个,而且也没有开发小程序的需求,所以就一拖再拖. 直到上周,终于有一个小程 ...

  7. 使用uni-app开发微信小程序

    uni-app 开发微信小程序 前言 9月份,开始开发微信小程序,也曾调研过wepy/mpvue,考虑到后期跨端的需求,最终选择使用了uni-app,本文主要介绍如何使用uni-app搭建小程序项目, ...

  8. WordPress 网站开发“微信小程序“实战(三)

    本文是"WordPress 开发微信小程序"系列的第三篇,本文记录的是开发"DeveWork+"小程序1.2 版本的过程.建议先看完第一篇.第二篇再来阅读本文. ...

  9. 如何用TypeScript开发微信小程序

    微信小程序来了!这个号称干掉传统app的玩意儿虽然目前处于内测阶段,不过目前在应用号的官方文档里已经放出了没有内测号也能使用的模拟器了. 工具和文档可以参考官方文档:https://mp.weixin ...

随机推荐

  1. Crayon 线段树或者树状数组

    Crayon Time Limit: 2000/1000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others) SubmitStatus ...

  2. Excel更改单元格格式后无效

    问题描述: 比如修改了数据的自定义显示格式(日期显示 yyyy"年"m"月",手机号分段000-0000-0000),应用后发现只有部分生效,或者都不生效,再检 ...

  3. java数据库编程之初始Mysql

    2.3:命令行连接mySql 2.3.1:检查是否启动服务 步骤:计算机-----管理------服务和应用程序-------服务---搜索mysql右键启动服务 2.3.2:命令行方式连接数据库 步 ...

  4. linux下快速列出文件列表的方法

    前言 这两天碰到一个很棘手的问题,需要读取出ubuntu系统中某个目录下所有文件,由于服务器中存储的文件实在太多,导致此过程效率十分低下,动辄需要等待一个小时之久,还只是一个目录.于是如何快速获取文件 ...

  5. 解决-Dmaven.multiModuleProjectDirectory system property is not set. Check $M2_HO问题

    原因:因为你的编译工具(eclipse/Myeclipse...)没有添加jdk.添加M2_HOME的环境变量. 解决: ①:window->Preferences->java->I ...

  6. oracle基本查询语句总结

    spool E:\基本查询.txt 将命令行的语句写入到指定的目下的指定的文件中 host cls 清屏命令 show user 显示当前操作的用户 desc emp 查看表结构 select * f ...

  7. DevOps之服务器

    唠叨话 关于德语噢屁事的知识点,仅提供专业性的精华汇总,具体知识点细节,参考教程网址,如需帮助,请留言. <服务器(Server)> DevOps之服务器划分为三部分:系统.虚拟化.器件. ...

  8. Android 发展史

    1. 概述 http://zh.wikipedia.org/wiki/Android# 2. Android版本发布表 Time Code name Version API level  2014年1 ...

  9. Angular4 后台管理系统搭建(10) - 做一个通用的可跨域上传文件的组件

    写的很慢,不知不觉这是第十篇了.但是我其他事情太多,只能抽空写下.现在angular4或angular2流行的上传方式是ng2-file-upload.它的功能很强大.但是我没有配置成可以跨域上传的. ...

  10. win10 uwp 如何让WebView标识win10手机

    本文主要:如何让WebView访问的网页设别为手机,当然这句话我说不好,换个,如何让WebView设别为手机.上面两句话都是错的,因为是服务器识别,不是网页,第二句话应该是让服务器而不是WebView ...