为了便于开发者灵活配置小程序，微信小程序开放了内嵌网页能力。这意味着小程序的内容不再局限于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. JQ重复注册问题

    开发中常常会碰到事件重复注册,简单总结一下解决方法. (1)bind注册事件 $('...').unbind().bind('...',function(){}) (2)live注册事件 $('... ...

  2. vue语法之拼接字符串

    先来一行代码: <div class="swiper-slide" v-for="item in message"> <img v-bind: ...

  3. IOC模式理解

    理解IOC inversion of control  控制反转  与  DI   Dependency Injection  依赖注入概念之前,我们需要知道在一个系统的设计过程中,降低各模块之间的相 ...

  4. gulp使用1-入门指南

    入门指南 1. 全局安装 gulp: $ npm install --global gulp 或使用cnpm 2. 作为项目的开发依赖(devDependencies)安装: $ npm instal ...

  5. sublime text注册码（秘钥）

    —– BEGIN LICENSE —– TwitterInc 200 User License EA7E-890007 1D77F72E 390CDD93 4DCBA022 FAF60790 61AA ...

  6. c# 多线程传递参数以及任务

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  7. ora-01440:要减小精度或标度，则要修改的列必须为空

    --由于业务需求变更,需要对oracle数据库productinfo表的productPrcie结构进行修改.修改表结构,必须是在表空的情况下才可以修改表结构.具体操作步骤: --1.查看produc ...

  8. 无限大地图：lightmap拆分

    无缝地图涉及到地形.物件的分块加载,同样,lightmap也需要动态加载.而场景烘焙时,所有物件都是一起烘焙的,那怎么把某些物件指定烘焙到某一张lightmap贴图中?网上找了很久,也没有看到具体的实 ...

  9. 初学python之，IDLE安装

    首先新手上路,写的第一篇博客,希望大家不要吐槽. 1.首先在python官网下载最新python版本 https://www.python.org/(注意根据自己的操作系统来选版本) 安装很简单傻瓜式 ...

  10. 企业微信开发之向员工付款（C#）

    一.企业微信API 地址:http://work.weixin.qq.com/api/doc#11545 二.参数说明 1.向员工付款 请求方式:POST(HTTPS)请求地址:https://api ...