扫码下载APP
您是个人用户，您可以认领企业号
账号密码登录
一周内自动登录
我同意并遵守
免密码登录
获取验证码
我同意并遵守
第三方账号登录
Hello,新朋友
在发表评论的时候你至少需要一个响亮的昵称
&>&&>&微信小程序新增Webview,它是什么东西?_
微信小程序新增Webview,它是什么东西?_
时间：11-03 22:39
阅读：55867次
来源：安阳红香阁文化传播有限公司
摘要：今天刚刚给客户做完案子，正准备去睡觉。日 11:29 看到了微信公众平台推送的小程序新动态，作为靠小程序吃饭的公司一员，马上就滚去看了。然后明白了什么叫“篇幅短不嫌事大”型官方推送！
今天刚刚给客户做完案子，正准备去睡觉。日 11:29 看到了微信公众平台推送的小程序新动态，作为靠小程序吃饭的公司一员，马上就滚去看了。然后明白了什么叫“篇幅短不嫌事大”型官方推送！小程序支持内嵌网页了，也就是我们熟知的webview组件开放了！什么是webview？那就让本本以最通俗易懂的语言为你解读一下吧：你的网页，html写的网页，官网，网站，运行在浏览器上的，有域名的那种，可以内嵌到小程序里了！那么这意味着什么呢？又回到了我们的标题：有了webview，你还需要开发独立开发官网小程序吗？怀着激动心情的本本，在第一时间打开了本际科技小程序的后台，为大家送上第一波操作：首先根据了官方的使用指引——1. 开发者登录小程序后台mp.weixin.qq.com，选择设置-开发设置-业务域名，新增配置域名模块。目前小程序内嵌网页能力暂不开放给个人类型帐号和海外类型帐号。2.每次配置均需管理员扫码验证身份。3.配置业务域名时需要严格按照提示要求配置。限制说明1）每个小程序帐号仅支持配置最多20个域名；2）每个域名仅支持绑定最多20个小程序；3）每个小程序一年内最多支持修改域名50次；4）公众平台后台域名配置成功后，才可使用web-view组件。需要注意的是，你所添加的业务域名必须是HTTPS加密的，也就是申请过SSL证书的。还好本本习惯好，官网的全站https以及cdn加速已经恭候本功能多时了！那么，绑定好域名就厉害了！你只需要在 微信开发者工具 创建一个项目，不用有任何内容，直接勾选创建QuickStart项目就可以进入之后，随便找到一个wxml页面，在里面加入一行神奇的代码然后 和本际科技官网一毛一样的小程序就诞生啦！做到这里，本本只想说一句，厉害了！那么，出现webview组件的意义在于哪里呢？相信在开发IOS Android APP的大家应该都听说过原生APP和封装APP的区别吧。那么未来原生小程序和封装小程序会在市场上出现吗？在APP方便，很多开发者拿来比较，都会说封装的没有原生的用户体验好。可是刚才本本用刚测试的开发版拿在手机里玩了玩，感觉真的是如丝般顺滑啊！难道是本际的官网做的太好，还是俺的水果手机比较流畅....明天太阳升起，不知的市场会如何动荡，本本和各位一起拭目以待了！最后，由于老板的嘱托，还是得加上一句，不管你是开发官网，还是小程序，一定要找专业的公司啊，能在微信公布的第一时间为大家尝鲜新功能并连夜发出文章的，也不可能是不靠谱的开发公司咯~所以，做网站小程序微信公众号，就找本际科技啦~服务热线：（微信同号）（这段话一块五，把括号里的内容删掉）看到这样可怜的没有X生活的小编，你不点个赞再转发一下吗？
声明：本文由安阳红香阁文化传播有限公司企业号发布，依据企业号用户协议，该企业号为文章的真实性和准确性负责。创头条作为品牌传播平台，只为传播效果负责，在文章不存在违反法律规定的情况下，不继续承担甄别文章内容和观点的义务。
关注企业号
TA的其他文章
52419次阅读
24小时热文
1.3万次阅读
5237次阅读
5136次阅读
5044次阅读
5031次阅读
5005次阅读
4952次阅读
4911次阅读
63您已经赞过了
分享用户：
阅读下一篇
微博短视频内容突破进行时本实例将演示从零开发一个微信应用号的过程，页面轮播与跳转传值，实现单元格自定义布局，全部源码可通过github下载。
下载最新版的微信小程序开发工具，目前是v0.9.092300 下载地址：
官方文档：
git下载地址：
先看下效果图：
一、新建应用
1.内测阶段对于无内测号的开发者，请点无AppId。
2.然后选择一个本地目录作为工程目录。
3.项目名称任意，设置好目录，勾上当前目录创建quick start项目。如图：
4.点击添加项目，这时可以运行的效果。是自己的微信个人信息以及一HelloWorld文本框。
5.右边是调试窗口，有2个警告，是由于没有AppID导致的，可以暂时忽略，不影响开发。
6.提示一下，在app.json中设置debug:true，这样控制台看到实时的交互信息，以及将来在js文件中设置断点，类似与Chrome的调试工具以及Firefox的Firebug。
关于首页配置：
"pages/index/index",
"pages/logs/logs"
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
"debug":true
其中pages属性表明每一个页面的存在，其中第一条为首页，即pages/index/index
二、请求网络API接口
1.前提条件：
这里需要用到聚合数据的新闻接口，前往： 注册、申请接口，拿到key，我这里已经申请到一个key：482e213caccbb262c90320a，可以直接拿它做测试，然后就可以将它集成到自己的应用了。
2.使用微信小程序接口来访问网络：
改写index.js文件：
//index.js
//获取应用实例
var app = getApp()
motto: 'Hello World',
userInfo: {}
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
onLoad: function () {
// 访问聚合数据的网络接口
wx.request({
url: 'http://v.juhe.cn/toutiao/index',
type: '' ,
key: '482e213caccbb262c90320a'
'Content-Type': 'application/json'
success: function(res) {
console.log(res.data)
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据
that.setData({
userInfo:userInfo
3.查看效果，检查Console控制台，得到以下信息：
说明已经成功取得到了数据。
三、将json格式的数据渲染到视图
这里要用到swipe组件实现大图轮播，文档见：
1.清空原index.wxml内容，加入如下代码：
&swiper indicator-dots="true"
autoplay="true" interval="5000" duration="1000"&
&block wx:for="{{topNews}}"&
&swiper-item&
&image src="{{item.thumbnail_pic_s02}}" class="slide-image" width="355" height="150"/&
&/swiper-item&
2.相应地在index.js文件的onLoad方法中加入如下代码来获取网络数据
//index.js
//获取应用实例
var app = getApp()
topNews:[],
techNews:[]
onLoad: function () {
var that = this
// 访问聚合数据的网络接口-头条新闻
wx.request({
url: 'http://v.juhe.cn/toutiao/index',
type: 'topNews' ,
key: '482e213caccbb262c90320a'
'Content-Type': 'application/json'
success: function(res) {
if (res.data.error_code == 0) {
that.setData({
topNews:res.data.result.data
console.log('获取失败');
3.看到轮播已经成功的展示出来了
4.依样画葫芦，同样操作读取列表新闻：
&view class="news-list"&
&block wx:for="{{techNews}}"&
&text class="news-item"&{{index + 1}}. {{item.title}}&/text&
配合样式表，不然列表文字排版是横向的，将以下css加到index.wxss中：
.news-list {
flex-direction:
padding: 40
.news-item {
margin: 10
继续美化，文字列表也采用缩略图+大标题+出处+日期的形式
样式表与布局文件 index.wxss
/**index.wxss**/
.news-list {
flex-direction:
padding: 40
.news-item {
flex-direction:
height:200
.news-text {
flex-direction:
.news-stamp {
font-size: 25
padding: 0 20
flex-direction:
justify-content:space-
.news-title {
margin: 10
font-size: 30
.container {
height: 5000
flex-direction:
align-items:
justify-content: space-
/*padding: 200rpx 0;*/
box-sizing: border-
.list-image {
height:100
index.wxml
&!--index.wxml--&
&swiper indicator-dots="true"
autoplay="true" interval="5000" duration="1000"&
&block wx:for="{{topNews}}"&
&swiper-item&
&image src="{{item.thumbnail_pic_s02}}" mode="aspectFill" class="slide-image" width="375" height="250"/&
&/swiper-item&
&view class="container news-list"&
&block wx:for="{{techNews}}"&
&view class="news-item"&
&image src="{{item.thumbnail_pic_s}}" mode="aspectFill" class="list-image"/&
&view class="news-text"&
&text class="news-title"&{{item.title}}&/text&
&view class="news-stamp"&
&text&{{item.author_name}}&/text&
&text&{{item.date}}&/text&
四、跳转详情页与传值
保存当前点击的新闻条目信息中的title，参见官方文档：
传值到详情页
&!--logs.wxml--&
&view class="container"&
&text class="news-title"&{{title}}&/text&
&text class="news-info"&暂时找不到WebView的组件接口，于是不能加载网页数据&/text&
//事件处理函数
bindViewTap: function(event) {
wx.navigateTo({
url: '../detail/detail?title='+event.currentTarget.dataset.newsTitle
//index.js
//事件处理函数
bindViewTap: function(event) {
wx.navigateTo({
url: '../detail/detail?title='+event.currentTarget.dataset.newsTitle
&!--index.wxml--&
//加入data-xxx元素来传值
&view class="container news-list"&
&block wx:for="{{techNews}}"&
&view class="news-item" data-news-title="{{item.title}}" bindtap="bindViewTap"&
&image src="{{item.thumbnail_pic_s}}" mode="aspectFill" class="list-image"/&
&view class="news-text"&
&text class="news-title"&{{item.title}}&/text&
&view class="news-stamp"&
&text&{{item.author_name}}&/text&
&text&{{item.date}}&/text&
当然也可以通过获取全局的变量的方式传值，这里场景是由一个页面与子页面是一对一传值关系，所以不推荐，可参考quickStart项目中微信个人信息的传值方式来做。
app.js末尾加上
globalData:{
userInfo:null,
newsItem:null
由于未在官方文档中找到WebView的组件，所以详情的网页正文暂时无法实现。
整体开发过程还是比较舒适的，上手难度不高，过程中用到一定的CSS语法，本质上还是体现了一个H5开发模式，WXML实质上一种模板标签语言。
论坛回复 /
(0 / 1334)
浏览: 17247 次
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'友情链接：
版权所有 & 西安点测网络科技有限公司 2014 - 2017 陕ICP备号-4如何打开微信小程序的控制面板
[问题点数：20分]
如何打开微信小程序的控制面板
[问题点数：20分]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
匿名用户不能发表回复！|解决微信小程序组件所在页面无返回按钮的问题-小程序模板
问题出现web-view组件是微信小程序1.6.4版本开始支持的功能，用以承载网页的容器，会自动铺满整个小程序页面。但是个人类型与海外类型的小程序暂不支持使用。我所在的项目为了在小程序上开辟渠道，新建了一个小程序 ...&web-view&组件是微信1.6.4版本开始支持的功能，用以承载网页的容器，会自动铺满整个小程序页面。但是个人类型与海外类型的小程序暂不支持使用。我所在的项目为了在小程序上开辟渠道，新建了一个小程序，这个小程序只有一个页面，页面中的代码很简单，就是一个&web-view&组件，将其src设置为原有的h5站点；小程序是可以正常跑起来，可以使用h5的原有功能，但是却遇到了一个尴尬点——在ios系统中，小程序页面左上角没有返回按钮；你可能在纳闷，我们项目也用了&web-view&组件啊，我们的怎么就有呢？其实出现这个情况，需要满足这个条件：小程序首页就是包含&web-view&组件的页面如果小程序只有一个页面，那它的左上角是没有返回按钮的（ios系统下），退出小程序只能从右上角的“圆圈”按钮退出，安卓系统也可以通过手机的返回按钮退出。如果小程序存在多个页面，互相之间发生过跳转，那左上角是有返回按钮的（ios系统下），你们的项目中有返回按钮，就是因为发生过跳转，承载&web-view&组件的页面一定不是小程序首页。分析其原因，其实就是无历史跳转，只有一个页面，解决方式也很简单，就是加一个空页面作为首页，当进入首页时，马上跳转到&web-view&页；但是代码上要做些处理，不能让它总跳转，当用户从&web-view&后退时，应该退出小程序；//app.js代码App({
&&&&onHide()&{&&&&&&&&this.data.webShowed&=&
&&&&},&&&&data:&{&&&&&&&&webShowed:&false&//标记web-view页面是否已经显示过了
});&!--首页wxml代码--&无//首页js代码var&app&=&getApp();
&&&&onShow()&{&&&&&&&&//如果已经显示过web-view页了，则执行后退操作，否则就跳到web-view页
&&&&&&&&if&(!app.data.webShowed)&{
&&&&&&&&&&&&wx.navigateTo({&&&&&&&&&&&&&&&&url:&'/pages/web-view/web-view'
&&&&&&&&&&&&})
&&&&&&&&}&else&{
&&&&&&&&&&&&wx.navigateBack({&&&&&&&&&&&&&&&&delta:&1
&&&&&&&&&&&&});
})&!--web-view&页面wxml代码--&&web-view&src=&url&&&/web-view&//web-view&页面js代码Page({
&&&&onShow()&{&&&&&&&&var&app&=&getApp();
&&&&&&&&app.data.webShowed&=&//标记已经显示过web-view页了
})上述代码可以解决小程序左上角无返回按钮的问题；但是问题只解决了一半，你可以尝试一个操作：打开小程序后，触发页面中的【转发】操作，将小程序转发给任意微信联系人，转发成功后，点击微信转发消息会重新打开小程序；此时你会发现，诶！！返回按钮怎么有没有了？！！这个问题跟小程序的转发有关系，因为我们小程序只有两个页面：首页，web-view页，用户触发转发只可能在web-view页（因为首页进入就会跳转或者后退，无法呈现在用户面前），转发出去时，会拿当前页面地址作为打开地址，故点击微信转发消息后会进入web-view页，而非首页；没有进首页，直接进入了web-view页，也就等同于web-view页就是首页了，问题又回到最上面的情况了，所以，解决方法就是配置转发设置，让转发出去的页面地址是首页即可；//web-view页&js代码Page({&&&&data:&{&&&&&&&&src:&''
&&&&onShow()&{
&&&&&&&&wx.showShareMenu({&&&&&&&&&&&&withShareTicket:&true
&&&&&&&&})
&&&&&&&&app.data.webShowed&=&
&&&&onShareAppMessage()&{&&&&&&&&return&{&&&&&&&&&&&&title:&'分享标题',&&&&&&&&&&&&path:&'/pages/index/index'&//&分享出去后打开的页面地址
您还可能喜欢
<img src="/upload//464807.jpg" alt="解决微信小程序组件所在页面无返回按钮的问题-小程序模板" title="解决微信小程序组件所在页面无返回按钮的问题-小程序模板" class="img-circle"/>
图片数量： 张
说说数量： 条
文章数量： 篇
留言数量： 条
评论数量： 条
素材个数： 个
Back to Top
选择风格关闭