前言 前面我们对微信小程序进行了研究:[微信小程序项目实践总结]30分钟从陌生到熟悉 在实际代码过程中我们发现,我们可能又要做H5站又要做小程序同时还要做个APP,这里会造成很大的资源浪费,如果设定一个规则,让我们可以先写H5代码,然后将小程序以及APP的业务差异代码做掉,岂不快哉?但小程序的web框架并不开源,不然也用不着我们在此费力了,经过研究,小程序web端框架是一套自研的MVVM框架,于是我们马上想到了借助第三方框架: 一套代码小程序&Web&Native运行的探索01 经过简单的…

作者:云图图链接:https://zhuanlan.zhihu.com/p/22578965来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 利益相关:微信小用户,谷歌小员工 微信发布了微信小程序,虽然还在内测阶段,但是无论从技术上,还是以后要不要开发原生应用(native app)上引发了不少讨论.其实看到微信小程序的消息, 我第一时间想到的是 Google 之前推出的PWA(Progressive Web App),两者的目的是类似的(伪原生应用),但是形式却又…

一:张小龙的野心:用小程序重构web 一 很多年以前,张小龙写了一款软件:Foxmail. 这款软件当年有数百万用户,这是一个相当庞大的量,因为彼时网民也只有千万当量级的规模. 我是一个非常忠实的用户,因为直至今天,我还在使用Foxmail. 但有理由相信,当年使用客户端(软件)收发邮件的用户,越来越多的,已经改变为用web来收发邮件. 打开一个网址,输入用户名和密码,看邮件发邮件,我相信是PC互联网时代中后期大多数用户的习惯. Foxmail这样的软件,最终被web服务击败. 二 移动互联网时…

微信小程序给我们提供了一个很好的开发平台,可以用于展现各种数据和实现丰富的功能,通过小程序的请求Web API 平台获取JSON数据后,可以在小程序界面上进行数据的动态展示.在数据的关键 一环中,我们设计和编写Web API平台是非常重要的,通过这个我们可以实现数据的集中控制和管理,本篇随笔介绍基于Asp.NET MVC的Web API接口层的设计和常见接口代码的展示,以便展示我们常规Web API接口层的接口代码设计.参数的处理等内容. 1.Web API整体性的架构设计 我们整体性的架构设计…

https://mp.weixin.qq.com/s/z5qm-2bHk_BCJAwaodrMIg 跨界!Omi 发布多端统一框架 Omip 打通小程序与 Web 腾讯开源 2月28日…

Omip 今天,Omi 不仅仅可以开发桌面 Web.移动 H5,还可以直接开发小程序!直接开发小程序!直接开发小程序! Github Omi 简介 Omi 框架是微信支付线研发部研发的下一代前端框架, 基于 Web Components 规范设计的组件化框架,可以开发 PC Web.移动端 H5,也可以直接使用 Omi 开发小程序.Omi 服务于微信支付 H5 页面, 微信支付 PC 网站以及内部 OA 系统,微信支付相关的小程序等.自去年年底开源以来,该项目共获得 Star 数 7000+,贡…

[node+小程序+web端]简单的websocket通讯 websoket是用来做什么的? 聊天室 消息列表 拼多多 即时通讯,推送, 实时交互 websoket是什么 websocket是一个全新的.独立的协议,基于TCP协议,与HTTP协议兼容却不会融入HTTP协议,仅仅作为HTML5的一部分. HTTP是个懒惰的协议,server只有收到请求才会做出回应,否则什么事都不干.因此,为了彻底解决这个server主动像client发送数据的问题.W3C在HTML5中提供了一种client与se…

介绍 Mpvue 是一个使用 Vue.js 开发小程序的前端框架.框架基于 Vue.js 核心,修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验,同样也使得一套代码同时复用在小程序和 Web 中成为可能.本文将以 IT之家Lite 小程序的 Web 转换经过为线索,大致介绍一下转换的基本步骤及需要注意的一些事项. 目录结构 省略了部分与转换无关的文件 ├─build ├─config ├─src…

嗯……我们设计师强烈要求一定要圆角!圆角的气泡对话框,不要那种尖角的.这其中还遇上了个尴尬的问题,z-index不生效 无非就是两种方法,一种是使用图片再定位拼接起来使用,太简单了具体就不详细的说了.另一种方法就是border来写了,虽然怎么写都是尖角的,可是我想尝试一下.纯手写写出设计师想要的圆角吧 什么是圆角的?什么是尖角的?以下图片可以对比出来: 这种是尖角: 这种是圆角: 尖角的方法网上一搜也是一大堆,其中有我最喜欢的阮大神的方法,阮大神博文在此(可点击):http://www.ruan…

在我前面有很多篇随笔介绍了Web API 接口层的架构设计,以及对微信公众号.企业号.小程序等模块的分类划分.例如在<C#开发微信门户及应用(43)--微信各个项目模块的定义和相互关系>介绍了相关模块的划分,在<基于微信小程序的系统开发准备工作>介绍了Web API的架构设计思路.本篇随笔对之前介绍的架构内容进行统一的调整更新,以便更加方便实际项目的应用开发,以期达到统一.重用.清晰的目的. 1.公众号.企业号.小程序模块的划分 我们知道,目前微信企业应用,分为公众号.企业号(企业…

view 视图容器. // wxml <view class="section"> <view class="section__title">flex-direction: row</view> <view class="flex-wrp_one"> <view class="flex-item bc_green">1</view> <view cl…

图片变形很多人祭奠出了妖魔鬼怪般的各种大法,比如使用jq来写,或者使用css表达式来写.今天我总结的是使用css3来写,唯一最大缺点就是对一些浏览器版本不够兼容.下面就是关于如何使用css来让图片居中不变形 web端: img{vertical-align:middle;object-fit: cover} object-fit: cover 的效果和background-size:cover;的效果一样,一个缺点就是容器不够适应的原图大小的比例的话,会按照比例进行放大裁剪 object-fit…

微信小程序view组件官方文档 传送门 Learn 一.hover-class属性 二.hover-start-time与hover-stay-time属性 三.hover-stop-propagation属性 一.hover-class属性 hover-class:指定按下去的样式类.当 hover-class="none" 时,没有点击态效果[默认值none] 定义.a的class颜色为红色,定义.d的class为绿色,当鼠标点击时红色区域变成绿色区域,当鼠标离开时,绿色区域又变回…

前言 对于从VUE过来的前端同学来说,见到小程序的第一眼一定是熟悉-感觉就像是把vue的单文件拆成了3个文件.但是,随着慢慢入坑.马上会发现,这样怎么不行?wxs文件又是什么鬼?template和vue的template一样吗?下面我们来一起探索一下. wxs文件的写法 根据官方文档的说法,wxs是小程序的一套脚本语言,用于和wxml一起构成页面结构.就像js一样,你可以在wxml中借助 在 HTML中的内联js <script>console.log('hello world')</s…

目录 animation 的几个关键方法 step 方法 export 方法 如何实现 infinate 动画 小程序的 animation 有一套怪异的 API,既不符合 css 的 keyframes,又不符合 DOM 的 API,可以说是一个四不像,所以很久以来,我是对这个 API 是有点排斥的,但是,在对 cover-view 中进行动画的时候,还非得用这个 API 不可.因为对 cover-view 进行变换存在着一些 BUG animation 的几个关键方法 animation 实…

事情是这样的,我们有一个原生(wxml,wxss,js,json)写的小程序,要加入一个新的模块,并且时间比较紧张.所以我们选择了采用mpvue开发一个分包(subpackage),加入到原生小程序中,并确保被正确加载.下面说一下踩到的坑. 目录结构 首先说一下目录结构,上一张图: 上面的目录结构中,将mpvue项目目录跟原生小程序目录在同一个项目根目录下,然后通过修改webpack配置文件将build文件目录修改到原生小程序目录下面.然后再通过小程序的app,json的配置,将mpvue bu…

1.实现思路 利用小程序去调用公司zabbix的接口获取网站监控数据并展示出来. 2.准备阶段 1.小程序公众号 2.企业号 3.zabbix接口 3.实现过程…

uni-app使用使用Node+Koa2开发的后端程序接收上传的文件 通过gitbook浏览此随笔 通过其它客户端上传(h5,小程序等),接收方法一致 使用koa接收时,我们需安装一个中间件koa-body 安装所需中间件 npm install --save koa-body 配置koa-body //...code const Koa = require('koa'); const koaBody = require("koa-body"); const app = new Koa…

wx.getSystemInfo({success: function (res) {thisWidth = res.windowWidth;}}); that.setData({view_Width: thisWidth / ColIndex})//设置列宽 console.log('----------------------'); console.log('列数' + ColIndex + ' ; ' + '屏幕宽度:' + thisWidth + ':单元格宽度:' + thisWidt…

叨叨两句 昨天爬了一下午坑才出来的我向大家问好…

解决方案 就是可以在image那里设置vertical-align:top/bottom/text-top/text-bottom 原因:图片文字等inline元素默许是跟父级元素的baseline对齐,而baseline又和父级底边有必定间距…

图片文字等inline元素默许是跟父级元素的baseline对齐,而baseline又和父级底边有必定间距 我是使用: 加上这个消除了间隙,如果没有解决,你可以分别用 vertical-align:top; vertical-align:text-top; vertical-align:text-bottom;…

前言 接上文:[一套代码小程序&Native&Web阶段总结篇]可以这样阅读Vue源码 最近工作比较忙,加之上个月生了小孩,小情人是各种折腾他爸妈,我们可以使用的独立时间片不多,虽然这块研究进展缓慢,但是一直做下去,肯定还是会有一些收获的 之前我们这个课题研究一直是做独立的研究,没有去看已有的解决方案,这个是为了保证一个自己独立的思维,无论独立的思维还是人格都是很重要的东西,然独学而无友则孤陋而寡闻,稍微有点自己的东西后,还是应该看看外面已有的东西了,今天的目标是mpvue,我们来看看其官…

接上文:一套代码小程序&Web&Native运行的探索01,本文都是一些探索性为目的的研究学习,在最终版输出前,内中的内容可能会有点乱 参考: https://github.com/fastCreator/MVVM https://www.tangshuang.net/3756.html https://www.cnblogs.com/kidney/p/8018226.html 经过之前的学习,发现Vue其实与小程序框架相识度比较高,业内也有mpvue这种还比较成熟的方案了,我们这边依旧不…

[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05-日历组件的实现 4. 微信小程序开发04-打造自己的UI库 5. 微信小程序开发03-这是一个组件 6. 微信小程序开发02-小程序基本介绍 7. 微信小程序开发01-小程序的执行流程是怎么样的? 阅读本文之前,如果大家想对小程序有更深入的了解,或者一些细节的了解可以先阅读上述文章,本文后面点需要对…

Cax 小程序.小游戏以及 Web 通用 Canvas 渲染引擎 Github → https://github.com/dntzhang/cax 点我看看 DEMO 小程序 DEMO 正在审核中敬请期待 小游戏 DEMO 正在审核中敬请期待 特性 Learn Once, Write Anywhere(小程序.小游戏.PC Web.Mobile Web) 支持小程序.小游戏以及 Web 浏览器渲染 小程序.小游戏和 Web 拥有相同简洁轻巧的 API 高性能的渲染架构 超轻量级的代码体积 松耦合…

omi-mp 是什么 Omi 框架是微信支付线研发部和 AlloyTeam 开源的通用 Web 组件化框架,基于 Web Components,用来开发 PC.手机浏览器或者微信.手Q webview 的 Web 页面.自今年5月开源以来,该项目共获得 Star 数 5000+,拥有贡献者29人.经过 Omi 原始开发团队和社区贡献者的共同努力,Omi 的生态发展非常迅速,包括: 其中,Omi 近期发布 omi-mp,旨在打破小程序和 Web 的边界,让"小程序员"能够使用小程序技术栈…

微信小程序即将推出,还没推出就火的不行了.基于微信这个巨大平台,小程序必然能有巨大成功.不过它并不能完全取代App,该开发App还得开发.如果我们自己想实现一个基于自己的APP包含类似微信的小程序功能,该如何实现了?我们先来看看小程序的技术特点. ## 小程序的特点1. 跨平台,微信就像JRE,在不同操作系统上都有实现,所以微信上的小程序就像运行在JRE上的java程序,从而实现跨平台.另外解决了多平台多机型的适配问题. 2. 体验好,webview加载html是最容易的跨平台方式,但是在手机上…

1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=14764346784612:简易教程:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=14764346775993:设计指南:https://mp.weixin.qq.com/debug/wxadoc/design/index.html4:设计资源下载:https://mp.weixin.qq.com/debug/wxadoc/design/#资源下载5…

关于本文的所有观点都是网上收集,与作者本人没有任何关系! 最近朋友圈已经被微信小程序刷屏了,这也难怪,腾讯的产品拥有广泛的影响力,谁便推出个东西,都会有很多人认为会改变世界,这不,张小龙刚一发布微信小程序的消息,很多人(技术的和非技术的)就跟打了鸡血似的,估计现在已经鸡血告急了! 我也看了网上的一些关于微信小程序的文章,估计那帮家伙连微信小程序是什么都没搞清楚,就在那里一本正经地胡说八道.好吧,我就通过本文让大家了解一些什么是微信小程序,以及微信小程序到底能为我们带来什么. 关于微信小程序的误解…