容器的概念,是用来包含其它容器(container)和项目(item). flex container——flex容器 A flexbox layout is defined using the flex or inline-flex values of the display property on the parent item. This element then becomes a flex container, and each one of its children becomes…

Flexbox ——弹性布局 Flexbox is a layout model for displaying items in a single dimension — as a row or as a column. 弹性布局是一种基于一维的行和列的布局模型. The key feature of flexbox is the fact that items in a flex layout can grow and shrink. 弹性布局的关键特性就是item(项)可以放大和收缩. Sp…

Flex Item flex容器的子元素就是这个容器的flex item. The direct children of a Flex Container (elements with display: flex or display: inline-flex set on them) become flex items. Continuous runs of text inside flex containers will also become flex items. flex容器里的连续文…

Main Axis——主轴 当flex-direction设置为row或row-reverse时,主轴的方向为水平方向.此时flex item为行内级元素. 当flex-direction设置为column或column-reverse时,主轴的方向为垂直方向.此时flex item为块级元素.…

Cross Axis——交叉轴,与Main Axis(主轴)垂直交叉. main axis is row or row-reverse the cross axis runs down the columns. 主轴是row或者row-reverse的时候,交叉轴是列的方向,就是垂直于水平方向,因为此时主轴为水平方向,交叉轴与主轴垂直交叉. main axis is column or column-reverse then the cross axis runs along the rows.…

写在前面,但是重点在后面 这是教程,也不是教程. 可以先看Demo的操作动图,看看是个什么玩意儿,GitHub地址(https://github.com/dunizb/wxapp-sCalc) 自从微信小程序内测以来,我的网络信息几乎被它刷屏,一瞬间,都不知道发生了什么.特别是当晚有人熬夜吐血出教程,我勒个去,这么拼,感觉不立马学习等会儿就会被别人踩死在这个行业.惶恐惶恐的过来几天,等到了国庆终于也可以跟风熬夜研究了. 好吧,来吧,所以说菜鸟只会写计算器....嗯,是的,我想不出什么好创意.下面…

今天1024程序员节,写文章庆祝!!! 今天的文章是讲微信小程序开发的,按理解把架构与框架说说.有不对之处请大神指点…… 微信小程序与web应用很像,但是原理不同,微信小程序是运行在微信应用内的,不是运行在浏览器上,所以JS的一些DOM操作在这里不适用.小程序有自己的一套标记语言(wxml),样式语言(wxss),与web开发的html和css思想是一致的. 首先,说说微信小程序架构. 架构分为视图层,逻辑层,组件,API几个部分.视图层负责页面结构.样式和数据展示,用wxml.wxss语言编写…

微信小程序从2016年9月21日开始内测 ,以及在2017年1月9号正式发布也有一段时间了, 很多人开始拥抱微信小程序,我也是一样 ,从微信小程序内测开始就加入进来 , 开始研究微信小程序 ,属于最早的一批小程序开发者 ,但是由于小程序发布后一直不温不火,以及在工作中也没有这方面的需求,所有本人也没有在这方面投入太多的时间, 这里贴一下我开源的一个小程序知乎日报,这是一年前写的了 , 当时也是花了很多的时间去研究,前几天对这个小程序进行了一些修改,也算是重新开始拥抱微信小程序 , 这几天公司也是…

作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存:ctrl+S: 一:推荐地址集合:(初入门者请先看这里) 1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=147643467…

这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程序开发•系列文章四]模块化 [微信小程序开发•系列文章五]主界面 [微信小程序开发•系列文章六]生命周期和路由 整个微信小程序从打开到关闭,整个过程可以分为很多阶段或者说状态,这一整段的过程,我们称之为小程序的生命周期.而周期中的每种不同的状态,到另一个状态的过度和转化,是需要一个触发机制的,这种机…

原文地址:http://www.wxapp-union.com/portal.php?mod=view&aid=359 本文由本站halfyawn原创:感谢原创者:如有疑问,请在评论内回复   还是先把问题列出来,让问题来驱动探索: 微信小程序开发工具的数据,配置,日志等目录在哪儿? 怎么找? 首先分析了一下源码,日志目录应该同NW.JS的应用目录相关,,,查查查,,一直查到NW.JS的C++源码,搞得太复杂,大概知道位置,但还是不确切.决定不往这条线找,换另一条路: 把日志文件修改输出到我指定…

做任何程序开发要首先找到其官方文档,微信小程序目前还在邀请内测阶段,目前官方放出了部分开发文档,经过笔者一天的查看和尝试,感觉文档并不全面,但是通过这些文档已经能够看出其大概面貌了.闲话不多说,我们先来看看其有哪些官方文档. 微信公众平台开发者文档统一入口为:https://mp.weixin.qq.com/wiki,这里面大部分内容都是以前就有的,微信开发都是基于此份文档. 现在的变化是在这份文档的顶部加了一个“微信公众平台.小程序”的入口,这个入口才就是专门针对微信小程序开发的文档,如下图:…

微信小程序开发 --02 微信小程序在开发中,难度系数不是很大,其中应用的技术也是web开发中常用的技术,虽然在微信开发者工具中的叫法与常见的web开发的叫法不太一样. 首先,在微信小程序开发中,代码文件格式大体有以下四中: .wxml .wxss .js .json 首先,wxml后缀的文件类似于html和xml的结合,例如在html中常用的div在微信小程序开发中被替换成了view,而在html中输出文本用的p标签被替换成了text标签,引入图像由html中的img 标签变成了image标签…

微信小程序开发-新闻列表之新闻列表绑定开发教程: 1.效果图预览 2.准备工作 在拿到效果图后不要先急着去写代码,而是要去分析一下页面的整体结构,用什么方式定位和布局.小程序里建议使用flex布局,因为小程序对flex的支持是很好的. 上一篇博客中完成了轮播图部分,接下来继续完成下面的新闻列表部分 3.wxml部分 新闻列表部分整体使用flex纵向布局比较合适, 先把页面内的元素标签和类名写好. <view class="post-container"> <view…

本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果. 开发准备工作 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅号的 AppID . 下载开发工具 下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=…

接上文:微信小程序开发06-一个业务页面的完成 github地址:https://github.com/yexiaochai/wxdemo 我们首页功能基本完成,我对比了下实际工作中的需求,完成度有70%以上,如果再花一两天时间,便能跟之前工作做的差不多了,今天我们继续实现一个页面列表,便结束这次的学习,后面几天要出差,所以总结性的文章本周未必能出来,静待下周吧. 这里考虑demo复杂度,列表页功能完成度也仅仅完成主功能模块,与真实工作完成度对比60%左右吧,于是我们开始愉快的代码,首先是将我们…

编写组件 基本结构 接上文:微信小程序开发02-小程序基本介绍 我们今天先来实现这个弹出层: 之前这个组件是一个容器类组件,弹出层可设置载入的html结构,然后再设置各种事件即可,这种组件有一个特点: ① 只提供Header部分以及容器部分 ② 容器部分的HTML结构由业务层提供 ③ 容器部分对应样式由业务层提供 我们如果要在小程序中实现这类组件,意味着我们需要往小程序中动态插入WXML结构,我们这里先做个demo,试试往动态插入WXML是不是可行 this.setData({'wxml': `…

前言: 微信小程序开入入门,如果你有html+css+javascript的基础,那么你就很快地上手掌握的.下面提供微信小程序官方地址:https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html 下面一起学一学,微信小程序的框架吧~看文档,别学别理解.在下的讲述如果不正确的话,可以参考官方文档,也可以帮忙改正.具体还得看官方文档. 目录 微信小程序的介绍,如何上手小程序,开发的框架,组件,api,技能与实战,…

微信小程序开发的游戏<拼图游戏> 代码直接考进去就能用 pintu.js // pintu.js Page({ /** * 页面的初始数据 */ data: { }, initGame: function () { this.setData({ cards: { card1: { num: 3, hidden: false }, card2: { num: 7, hidden: false }, card3: { num: 5, hidden: false }, card4: { num: '…

微信小程序开发的基本流程 一,微信小程序简介 1,微信小程序简称小程序,张小龙在微信公开课 Pro 上发布的小程序正式上线,时间是2017年1月9日. 2,微信小程序这个词可以分解为“微信”和“小程序”两部分 (1),其中“微信”可以理解为“微信中的”,指的是小程序的执行环境:当然微信在提供执行环境的同时也延长了用户使用微信的时间. (2),“小程序”是说它首先是程序,然后具备轻便的特征.小程序并不像其他应用那样,它不需要安装,而是通过扫描二维码等打开后直接执行:用完以后也不需要卸载.这就是所谓…

在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发企业内部宣传展示等功能. 一.小程序主体部分 一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下: 1. 小程序逻辑 App({ onLaunch: function() { // Do something initial when launch. }, onShow: function() { // Do something when show. }, onHide: function() { // Do something…

在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发热门电影及预览功能. 本文主要分为两个部分,小程序主体部分及电影主页和详情页页面部分 一.小程序主体部分 一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下: 1. 小程序逻辑 App({ onLaunch: function() { // Do something initial when launch. }, onShow: function() { // Do something when show. }, onHide…

在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发计算器功能. 本文主要分为两个部分,小程序主体部分及计算器业务页面部分 一.小程序主体部分 一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下: 1. 小程序逻辑 App({ onLaunch: function() { // Do something initial when launch. }, onShow: function() { // Do something when show. }, onHide: funct…

本篇文章想跟大家分享下:我们公司“湖北诚万兴科技”最近刚帮客户定制开发.目前已上线的“哎咆课堂”微信小程序的开发经验分享.首先大概介绍下这个小程序所涉及到的主要技术点:微信登录.微信支付.微信小程序Flex布局以及微信小程序视频播放器的使用. 首先,任何一个微信小程序开发之前都需要先设计界面效果图:既然是仿网易云课堂App,那么界面上都有不少地方是借鉴其布局排版,先一睹为快看下首页和课程分类界面的效果吧 界面效果图确定,下面就开始做程序开发,这也是本文要讲的重点,主要经验总结如下: 1.使用"t…

本文介绍如何使用微信小程序开发天气预报功能. 一.项目文件列表 二.小程序配置 使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. { "pages":[ "pages/index/index" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgrou…

转载: 小程序开发总结(详细) 这段时间一直在做小程序,总结下.后续可能会不断更新,努力写仔细点,争取让人看到就能会写. 一,页面结构. 这基本是小程序的标准目录结构.我们从上到下解释下:pages文件夹放置我们所有用到的页面,基本是一个页面一个文件夹,类似模块.每个页面中,有四个文件(有的可能不会有.json文件).分别是:js/json/wxml/wxss. .js:是页面的脚本文件,是必要的.在这个文件中我们可以监听并处理页面的生命周期函数.获取小程序实例,声明并处理数据,响应页面交互事件…

今年过年,主要看了<奇葩说>和<电锯惊魂>,很不错,好东西的确需要留出足够的时间来看,匆匆忙忙走马观花是对作者的不尊重.除此之外,就是研究了一下微信小程序开发,先说对小程序的看法: 1.学习成本低.移动端很重要,谁都知道.但对于普通开发者,要投入到移动端的开发中,学习.掌握移动端开发,成本较高.我原来搞了一段时间android开发(Android新手之旅),项目完成后有一段时间放下了,后来想捡起来发现很困难.我思考,也许一个很重要的原因,android开发用java.clipse,…

小程序目前被炒得沸沸扬扬,无数媒体和企业借机获取阅读流量. 这再次证明一点,微信想让什么火,真的就能让什么火.这种能力真是全中国再也没有人有了,政府也没有. 但四处传的消息很多是失真的,废话不说,先列出8个多数人都搞错的问题: 小程序是HTML5: 小程序是B/S的: 把M站改改就可以接入到小程序里: 小程序体验不佳: 小程序适合低频长尾应用: 小程序是新的Appstore: 小程序做不起来,需求不高: 小程序会做起来,但会和原生应用长期并存. 以上8个是很多人凭直觉得出的结论,但真正深度调研和…

微信小程序开发:学习笔记[4]——样式布局 Flex布局 新的布局方式 在小程序开发中,我们需要考虑各种尺寸终端设备上的适配.在传统网页开发,我们用的是盒模型,通过display:inline | block | inline-block. position.float来实现布局,缺乏灵活性且有些适配效果难以实现.比如像下面这种常见的信息列表,要求内容高度不确定下保持垂直居中: 这种情况下,我们更建议用flex布局. 在开始介绍flex之前,为了表述方便,我们约定以下术语:采用flex布局的元素…

0. 前言 这两天刚好了解了一下微信小程序的蓝牙功能.主要用于配网功能.发现微信的小程序蓝牙API已经封装的很好了.编程起来很方便.什么蓝牙知识都不懂的情况下,不到两天就晚上数据的收发了,剩下的就是数据帧格式的定义,当然这部分就不是本次博客的重点.1. 准备硬件 这里我准备了CH341SER这个作为USB转串口.用sscom5.13.1 串口工具.由于我不太懂硬件开发.硬件部分都是由公司其他人开发的.我只是负责把环境搭建起来.然后负责我的微信小程序开发. 2. 开发小程序简单讲解 onLoad…