为了便于开发者灵活配置小程序,微信小程序开放了内嵌网页能力。这意味着小程序的内容不再局限于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. 超级密码 hdu1226 bfs

    超级密码 Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Subm ...

  2. 约会安排HDU - 4553

    寒假来了,又到了小明和女神们约会的季节.  小明虽为屌丝级码农,但非常活跃,女神们常常在小明网上的大段发言后热情回复"呵呵",所以,小明的最爱就是和女神们约会.与此同时,也有很多基 ...

  3. Intellij idea史上最简单的教程之Linux下安装与破解Intellij idea2017

    一.前言 这一节我们介绍在Linux下如何安装与破解Intellij idea2017.现在有很多公司开发环境都是Linux,所以掌握在Linux环境下使用Idea办公也是咱们必须得掌握的技能. 记住 ...

  4. Python自学笔记-with详解

    with的作用: with关键字是一个替你管理实现上下文协议对象的东西,适用于对资源进行访问的场合,确保不管使用过程中是否发生异常都会执行必要的"清理"操作,释放资源,比如文件使用 ...

  5. spring <context:annotation-config> 跟 <context:component-scan>诠释及区别

    <context:annotation-config> 和 <context:component-scan>的区别 Difference between <context ...

  6. c# 【MVC】WebApi设置返回Json

    public static HttpResponseMessage toJson(Object obj) { String str; if (obj is String || obj is Char) ...

  7. Simple Validation in WPF

    A very simple example of displaying validation error next to controls in WPF Introduction This is a ...

  8. DevOps之唠叨话

    唠叨话 教学:人类培养态度.传授知识.训练技能的活动. 教学手册(Teaching Manual) 教学形式:教材与课程,师生(一对一.一对多).教学内容:系统框架和问答机制,结构(前言.目录.正文. ...

  9. Windows 10「设置」应用完整MS-Settings快捷方式汇总

    分类 设置名称 快捷方式 系统 显示 ms-settings:display 通知和操作 ms-settings:notifications 平板电脑模式 ms-settings:tabletmode ...

  10. win10 UWP Controls by function

    Windows的XAML UI框架提供了很多控件,支持用户界面开发库.其中一些有可视化,一些布局. 一些控件例子:https://github.com/Microsoft/Windows-univer ...