微信小程序之一——下载和初步认识
微信小程序之一——下载和初步认识
一、下载微信开发者工具
1.网页搜索微信小程序，打开第一个官网，左上角点击小程序，开始注册登录。
2.下载地址（首页/小程序发布流程/普通小程序开发者程序/蓝色字体 微信开发者工具）
根据自己的计算机下载相应版本：
3.安装好之后在刚刚的网页里点击右上角的头像打开设置页面，获得AppID(小程序ID)
1.打开软件之后选择小程序，输入AppID(小程序ID)，填写项目目录（所在文件夹）以及项目名称，进入项目
2.刚进入就发现整个界面分为几个部分：模拟器，编辑器，调试器；
编辑器中已经存在pages文件夹，里面还有index和logs文件夹，除此之外的还有 app.json文件以及 app.js文件，app.json用来设置全局配置，app.js用来描述整个框架的逻辑；
index和logs文件夹中都有4个文件，名称都一样的不同类型的文件。
js文件和网页里面的js文件差不多，用来构造每个页面的逻辑，也就是函数在这里写；
wxml和html差不多，用各种标签来构造页面的结构，比如一个文本框，按钮等都需要在这个文件里写；
wxss和css差不多，用来辅助wxml丰富页面，写出各种样式然后被wxml里的东西引用；
json就是用来页面配置的。
一个小程序最基本的需要根文件夹（pages）下的app.js和app.json，一个页面需要 .js和 .wxml文件，其他的没有也可以，但是为了实现各种功能，所以会用到其他的文件。
3.pages下的每个文件夹都意味着一个页面，可以右击新建“目录”，在该目录下新建“component”，会自动生成四个文件，每新建一个页面都需要在app.json中的"pages":[]声明一下，例如：
"pages/login/login",
"pages/regist/regist"
必须写在双引号内，内容是页面路径，用逗号隔开，最后一个不需要，也就是说这其实是个页面数组存放的。
放在一对对的标签里，&view&&/view&,
&view class='view'&账号
&input placeholder='请输入账号' class='username' bindinput='getUserInput' value='{{name}}' name='username'&
其中&input&是文本输入框；placeholder是指输入框为空时显示的文字；class后面是在wxss文件里写的样式
.username{
width: 170
margin-left: 50
这是一个类选择器，用一个点加后面的名称 .username，就可以在wxml里引用了；bindinput 表示用哪个函数，在js文件的Page（{}），用 函数名称：function（）{}，例如：
//得到键盘输入的用户名和密码
getUserInput: function(e){
this.setData({
name:e.detail.value
value是指这里所用的值，如果是要交互的，也就是说会改变的，那就在js文件page里的data里面设置，例如：
调用时用双大括号来括住，{{name}}；同样，js函数里的this.setData（{}）里的name也是这个变量，e.detail.value是固定写法，表示获得这个文本框的内容，并且赋给name，这就改变了name的值，还有一个方法是this.data也可以使用，只不过它无法改变变量的值；
wxml里的name=‘’是这个文本框的id，名字，为之后的后台调用服务；
在wxss里使用分号，在js的data里用冒号不用=，值用双引号引住，函数里的变量用=，在wxml里用空格 =和单引号；
各组件可以查看帮助文档来使用：
（在微信开发者工具里点击开发者文档就可以了）；
如果无法输入中文，点击一下下方的AppData，再点一下其他地方就好了；
wxml里换行的话用&view&　&/view&，中间是全角空格，必须是全角的，半角的不识别。
没有更多推荐了，小程序UI与传统HTML5区别
小程序UI与传统HTML5区别
开发工具不同。
区别于H5的开发工具+浏览器Device Mode预览的模式，小程序的开发基于自己的开发者工具，可以实现同步本地文件+开发调试+编译+预览+上传+发布等一整套流程。
开发语言不同。
小程序自己开发了一套WXML标签语言和WXSS样式语言，并非直接使用标准的HTML5+。
组件封装不同。
小程序独立出来了很多原生APP的组件，在HTML5需要模拟才能实现的功能，小程序里可以直接调用组件。小程序开发者工具
微信小程序的开发工具，基于MINA框架（现已取消该名称），现在官方公布的工具名为微信开发者工具。小程序开发工具是一种基于Native
System系统层的框架，由于并非运行在浏览器中，所以在web中的一些诸如Document、Window等方法无法使用。
从执行的速度方面，普通HTML5和小程序有哪些不同呢，用一张图表简单表示下：
传统HTML5在加载的时候受限于网络环境，需要顺序加载、、，然后返回数据，最后渲染页面显示在浏览器中。用户经常需要等待很长时间，体验会受到影响。
相比之下，小程序的两个线程：Appservice Thread和View Thread会同时进行、并行加载，甚至Appservice Thread会更早执行，当视图线程加载完，通知Appservice，Appservice 会把准备好的数据用setData的方法返回给视图线程。
小程序的这种优化策略，可以减少用户的等待时间、加快小程序的响应速度。
WXML在语法上更接近XML语言，遵循SGML规范，区别于HTML语言随意的标签闭合方式，WXML语言必须包括开始标签和结束标签，以image标签为例，以下2种写法都支持：
&image src="" /&
&image src="" &&/image&
这里需要注意的是：
所有组件与属性都是小写，以连字符-连接。
2、文件引入
WXML提供两种文件引入方式，import和include。区别在于：import可以引入定义好的template模板，模板是有作用域的；而include就是拷贝一个公用的代码片段到目标文件中，适合做公共页面片的拆分。
&!--import--&
&import src="../template/a.wxml"/&
&!--include--&
&include src="../include/footer.wxml"/&
文件引入在小程序做模块化拆分的过程中非常重要。
1、尺寸单位
WXSS支持的单位有px、和rpx，其中rem和rpx可以针对屏幕容器进行适配，px则为固定尺寸。
其中1rpx=0.5px，在WXSS和WXML中定义的rpx单位最终会转换为在手机端可以识别的rem单位。建议：开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
所以工程师拿到750的设计稿，在PS中量取的容器大小，可以直接定义为rpx，不需要进行2倍尺寸的换算。
font-size:26
height:400
备注：rpx的单位不光在样式中会自适应，写在WXML的style里也会根据屏幕自适应。
2、样式引入
看到很多文章说小程序不支持样式的@import，其实官方公布的第一个正式开发者工具就已经支持了。
import "../../wxss/common.wxss";
小程序支持的选择器在官方公布的文档中包括.class、#id、 element、element,element、::after(注意是双冒号)、::before这6种选择器。
经过测试，小程序对于:first-child、:last-child、.class-a .class-b{}，甚至更多层级的嵌套都是支持的。
不过官方并不推荐级联的这种写法，因为考虑到后面切Native的扩展可能，会没办法支持级联选择。
所以保险起见，不建议.class-a .class-b{}这种级联的写法，以免后期工具过滤导致页面错乱。
小程序在0.10.102800的版本中加入了 textarea，并即将废弃操作反馈的系列组件。
我们简单通过一个表格来对比下HTML5和小程序的组件标签的区别；
下面一一来分析下：
div和view都是盒模型，默认display:block。
盒模型在布局过程中，一般推荐display:flex的写法，配合justify-content:align-items:的定义实现盒模型在横向和纵向的居中。
除了text文本节点以外的其他节点都无法长按选中。。
截止到0.10.102800的开发者工具text支持嵌套text，不过有class的text会被面板过滤，样式不影响。
&text class="text-tips"&
&text class="text-light"&* &/text&友情提示!
&!--支持text嵌套text--&
&view&&/view&
&!--不支持text嵌套其他标签--&
icon可以直接用微信组件默认的图标，默认是iconfont格式的，从WeUI那边沿袭过来的一种做法。
自定义的icon推荐svg sprite格式或者iconfont。
目前来看，市面上还没有很好的自动合并单个svg为svg sprite的工具，需要手动拼图。
input 的类型，有效值：text, number, idcard, digit, time, date 。
input不需要设置line-height或padding来纵向居中，默认placeholder的文字是居中的。
小程序把checkbox和radio都单独做成了组件，默认的input只支持输入文本。
上传文件在小程序里需要调用chooseImage事件完成；
&input type="file" class="upload-input" accept="image/*"&
&!--HTML5的上传文件--&
&view class=" upload-block" bindtap="chooseImage"&&/view&
&view class="upload-block" wx:for="{{imageList}}" wx:for-item="image"&
&image src="{{image}}" class="pic" data-src="{{image}}" bindtap="previewImage"&&/image&
&!--小程序的上传图片，可以调用app原生的拍照和上传图片接口--&
小程序CSS里的 :focus 不生效，需要修改placehoder的样式，通过placeholder-class=”class”来定义。
.login .input-group input::-webkit-input-placeholder {
color: #c0c0c0;
.login .input-group input:focus::-webkit-input-placeholder {
&!--HTML5通过focus修改placeholder默认和点击时候的样式--&
&input type="text"
placeholder="邮箱" placeholder-style="color:#c0c0c0" /&
&input password type="number" placeholder="密码" placeholder-class="placeholder"
&!--小程序里通过placeholder-style和placeholder-class修改样式，不过并不能修改点击时候input的边框颜色--&
picker默认支持普通、日期和时间三种选择器。
picker通过bindchange事件来调取range中自定义的数据数据，并展示到页面中，调用的是系统原生的select。
这里小程序废弃了select组件，考虑到的是这个组件的交互不适合移动场景，最终用picker代替了。
&select class="select-block"&
&option value="0"&选择&/option&
&option value="1"&北京&/option&
&option value="2"&上海&/option&
&!--HTML5的下拉框--&
&picker bindchange="bindPickerChange" value="{{index}}" range="{{area}}"&
&view class="picker"&
{{area[index]}}
area: ['中国', '美国', '巴西', '日本'],
&!--js里的area数组--&
&!--picker下拉框--&
6、 navigator
navigator支持相对路径和绝对路径的跳转，默认是打开新页面，当前页面打开需要加redirect；
navigator仅支持5级页面的跳转；
navigator不可跳转到小程序外的链接地址；
&navigator class="navigator" redirect
url="../login/index" &登录页&/navigator&
在小程序开发工具里，默认打开新页面，工具左上角有返回按钮。加上redirect，当前页打开，不出现返回按钮。
小程序的image与HTML5的img最大的区别在于：小程序的image是按照background-image来实现的。
默认image的高宽是320*240。必须通过样式定义去覆盖这个默认高宽，auto在这里不生效。（开发者说这样设置的原因是：如果设置 auto
，页面布局会因为图片加载的过程有一个闪的现象（例如高度从 0 到 height ），所以要求一定要设置一个宽度和高度。）
最新的api支持获取图片的高宽。不过这里返回的高宽是px单位，不支持屏幕自适应；
图片包括三种缩放模式scaleToFill、aspectFit、aspectFill和9种裁剪模式，三种缩放模式的实现原理对应如下：
scaleToFill{
background-size:100% 100%;//不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit{
background-size://保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill{
background-size://保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
额外补充下button的实现方式，button的边框是用:after方式实现的，用户如果在button上定义边框会出现两条线，需用:after的方式去覆盖默认值。不过这个应该会在最近的开发者工具中修复。
button::after {
content:" ";
width:200%;
height:200%;
border:1px solid rgba(0, 0, 0, 0.2);
小程序不支持button:active这种样式的写法，button的点击态通过.button-hover{}的样式覆盖，也可修改hover-class为自定义的样式名。
9、css3动画
最新版的开发工具已经支持transition和keyframes动画，不用js苦哈哈的写动画队列了。
除了官方公布的小程序的组件之外，有一些标签比如，span、em、strong、b也是支持的，只是官方并不推荐使用。
浏览器内核
在平台上，微信的浏览器渲染内核是wkwebview；
而在平台上，微信则采用了腾讯QQ浏览器2016年4月份发布的X5内核（blink内核）作为渲染引擎。
在小程序的开发工具上，小程序的JavaScript是运行在chrome内核（nwjs）中。autoprefixer
小程序会在接下来的版本中加入自动补全css前缀，使用的插件是postcss的autoprefixer，设置的兼容级别是& ios 8及& android 4.1。
const browserOptions = {
browsers: [
'last 3 versions',
'ios &= 8',
'android &= 4.1',
也就是说，我们在写css的时候只需要写没有前缀的写法。比如：display:flex，工具自动编译为display:display:-webkit-flex。
OM小程序实战
上图为OM小程序的开发界面。下面我们从布局、智能裁图和loading动画几个方面简单说下OM小程序具体的UI开发经验。1、flex布局
以上图om的文章列表为例，文章的形态包括纯文字的和图文混合的。图文混合的文字不管是1行还是2行都需要相对于图片纵向居中。用flex的布局，就可以实现这3种状态不修改CSS文件，只按需隐藏DOM结构就搞定。
justify-content://设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items://定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
.media .content {
在做传统H5的时候，为了兼容各种低端设备的机型，通常不太敢轻易尝试flex，但在小程序里就可以大胆的使用了。
2、智能裁图
正是由于小程序把图片处理成背景图片，OM的素材管理页面图片的实现方式在这里遇到了一个挑战。
简单列举下om各种不同尺寸图片在平台上的展示方案。
1、高&50px：
（1）宽&175px，原图居中显示；
（2）宽&175px，定宽等比上下居中显示；
2、50px&高&400px：
（1）宽&175px，原图居中显示；
（2）宽&175px，定宽等比显示；
3、高&400px：
（1）宽&175px，原图居中显示、超出400px高度隐藏；
（2）宽&175px，定宽等比显示、超出400px高度隐藏；
这种方案，用css和img实现起来，只需要设置外层盒子最大高宽，图片自适应缩放即可。
.pic-list .pic-item .pic-body .pic {
width: 100%;
text-align:
max-height: 4
min-height: 0.5
display: -webkit-
-webkit-box-orient:
-webkit-box-align:
-webkit-box-pack:
.pic img {
-webkit-box-flex: 1;
然而因为小程序里是用背景图片的方式，简单的css设置并不能实现智能裁图的方案。需要配合js计算出不同尺寸图片对应的适配尺寸。
.pic-list .pic-item .pic-body .pic {
width: 100%;
text-align:
max-height: 800
min-height: 100
align-items:
justify-content:
这里需要后台接口提供数据列表的图片高宽，js对拿到图片的不同尺寸进行算法计算，重新赋值再返回给数据。
3、css3动画改变默认loading
小程序默认提供的loading是普通的菊花loading，这里OM使用自定义的keyframes序列帧动画。
.icon-loading {
animation: loadingWhite 1.2
animation-timing-function: steps(10);
@keyframes loadingWhite {
background-position:0 0;
background-position:-500rpx 0;
微信小程序集成了很多原生APP的组件，从体验和页面流畅度来说，都会比HTML5要优秀很多。
微信小程序相对于HTML5开发来说，除了熟悉API需要学习成本之外，开发难度指数3颗星，还是很容易上手的。
开发者工具、组件和API目前刚刚对外公测，还不算太成熟，里面还有很多坑需要开发者去填。
文章篇幅有限，在这里只能简单从UI开发角度介绍下小程序的开发经验。有关小程序的更多API，可以查阅小程序开发文档 。
由于开发工具一直在持续更新，文章中可能会有不准确或者更新不及时的地方，还请谅解。
以上来自：
这边不再列举文档写很清楚的东西了。建议先出门左转看文档之后再看tips。
前几天折腾了下。然后列出一些实验结果，供大家参考。
0. 使用开发工具模拟的和真机差异还是比较大的。也建议大家还是真机调试比较靠谱。
1. WXML(HTML)
1.1 小程序的WXML没有HTML的宽容度那么高，单标签必需是 /& 结尾的。不然会报错。
1.2 官方推荐使用的基础标签&view&是块标签，给了&text&作为文本标签，但是使用其他标签比如div也是可以使用的，并且都是inline标签。并且wxml的parser会把标签上的不在白名单上的属性都去掉，class, id, data 这些应该都在白名单内，但是href什么的是不会有的，所以如果你用传统的html的标签构建页面理论上也是可行的，不过这些都是inline标签，需要自行设定display。
1.3 scroll-view 的scroll-top, scroll-left 是可以修改scroll-view的滚动位置的。但是用户自己滚动了之后小程序并不会去改变 scroll-top, scroll-left 的赋值（并不是双向同步的）。如果这时使用setData去修改的话，scroll-top, scroll-left 的赋值和上一次的值相同，小程序是不会运用这个修改的，所以表现就是设置没有生效。这时只能先设置一个其他值，再设置回去（这里还可以体现setData方法是同步的）。scroll-view
获取scroll位置，只能通过bindscroll的回调函数获取，所以需要取scroll位置的请自行预存好。scroll-view 还是有webview的 scroll 的臭毛病，在居顶位置如果第一个动作是向下滚动的，会导致之后手怎么滑都滚不动，设置scroll-top 不为0，设个1就好了。
1.4 input 目前只支持文字居左，其他都是不行的（模拟器可以）。如果你做表单，建议把input等表单元素都放在form中，from触发submit时会返回内部所有表单元素的name-value。不然只能绑定所有表单元素的 change 事情来获取，甚是麻烦。
checkbox-group 有 change 事件，单个的checkbox是没有的，如果你只有一个checkbox， 觉得外面套一个checkbox-group麻烦又不美观的话，可以用 switch type="checkbox" 代替。
1.6 map 组建目前直接在app第一个页面加载会出现加载失败。需要在onLoad之后再加在。可以先wx:if="false" 然后onLoad的之后改成 true 就行了。
像是在webview上面盖一个native组件的感觉。它们是没法被overflow
以及 上面盖元素的，你可以认为z-index写多高都没法在他上面。所以不建议在页面上做弹层和蒙层。canvas 无法放在scroll-view中滚动会定位在初始位置，如果你给canvas设置背景颜色的话，你会发现背景色块跟着滚了，图没滚。
2. WXSS(CSS)
2.1 WXSS 和 CSS很像，基本所有的CSS都支持，小程序还提供了 rpx 这个单位。一屏幕宽是750rpx。推荐使用这个来作为布局。不过有一些细小的差别我下面会列出
2.2 WXSS不支持 大括号嵌套（{{}} ）。所以key-frames，CSS animation 就不可用了，不过transition 是可用的。
2.3 目前测试引入字体也是不可用的，前面WXML中提到的内容看SVG也是没法使用的。所以icon目前只能用图的方式做了。
2.4 WXSS中是不能引入本地资源的, 只能使用线上资源（模拟器是可以，但是别信），可以使用base64。
2.5 WXSS的 rule 是不支持集联的。所以不能 body .main {background:#000;} 这么写。所以写起来还是比较费劲的。每个class都得很长，不然怕重名。不过支持 li.current {color:} 这样的写法，支持after， before伪类，但是不支持 first-child last-child nth-child 这类伪类。
2.6 app.wxss 和每个 page 的wxss 的覆盖关系是: 如果有同名 rule 的话，page 会覆盖 app 的，不是merge是覆盖。
3.1 JS 的运行环境和view的运行环境是隔离的。JS只能通过事件获取时机和setData方法修改数据来改变view。
3.2 JS 目前有个很大的问题是无法获取到页面px级的宽度高度, 所有事件回调的单位都是px级的而不是rpx的，但是又不知道当前rpx，px的转换关系。比如过你用canvas画图。你都不知道边界在哪里，这个很蛋疼。
3.3 上面有说过 setData方法如果上一个值和下一个值相同时，是不会触发view修改的（见1.3）
3.4 使用 navigate 跳转的时候可以使用queryString的方式跟在相对地址上，onLoad事件会在入参中传入（会转化成object），但是 navigate back的时候没有一个官方给出的数据通讯机制。可以使用getApp() 获取到全局对象，给上面加点东西，自行实现。navigate 最多5个什么的就不说了。
3.5 canvas getActions被调用之后，actions是会被清空的。即连续调用两次getActions，第二次是空数组。
3.6 开发者工具是nw写的，我就看了看裙底的源码，开发者工具中WXML确实是有parser再拼装的过程的。但是并不能说明小工具是native的，从css的支持力度到webview的一些bug相似度来看，我还是觉得像webview，但是组件比如map，canvas什么的用的是原生view，然后盖在webview上的感觉。但是不管怎么说 auto-focus 能自动呼出键盘就已经是个很大的好评了。
说微信小程序时别再扯上HTML5了，它连HTML都不是！
小程序web-view分享html5网页，h5网页通过webview分享到微信群——微信web-view高级用法14
小程序与html5开发的差别（连载三）
微信小程序中显示html格式内容的方法
我们真的需要“小程序”么？HTML5 老兵如是说
微信小程序为什么不用HTML5、CSS，自己搞了个WXML、WXSS，很多框架用不了，好处一点不知道？
对比下HTML5和小程序的组件标签的区别
微信小程序body和html的问题
微信小程序是什么？有哪些特点？
没有更多推荐了，vue与微信小程序的一些区别，你知道吗？ | Javan的博客||条件渲染vue：使用v-if指令，v-else表示v-if的else块，v-else-if表示v-if 的“else-if 块”123456789101112&div v-if=&type === &A&&&
A&/div&&div v-else-if=&type === &B&&&
B&/div&&div v-else-if=&type === &C&&&
C&/div&&div v-else&
Not A/B/C&/div&
微信小程序：使用wx:if,wx:else表示wx:if的else块，wx:elif表示wx:if的”else-if”块123&view wx:if=&{{length & 5}}&& 1 &/view&&view wx:elif=&{{length & 2}}&& 2 &/view&&view wx:else& 3 &/view&
显示隐藏元素vue：v-show=&&微信小程序：hidden=&&
绑定classvue：全用v-bind，或者简写为:bind,和本有的class分开写1&div class=&test& v-bind:class=&{ active: isActive }&&&/div&
微信小程序：1&view class=&test {{isActive ? &active&:&& }}&&&/view&
事件处理vue：使用v-on:event绑定事件，或者使用@event绑定事件12&button v-on:click=&counter += 1&&Add 1&/button&&button v-on:click.stop=&counter+=1&&Add1&/button&
//阻止事件冒泡
微信小程序：全用bindtap(bind+event)，或者catchtap(catch+event)绑定事件12&button bindtap=&clickMe&&点击我&/button&&button catchtap=&clickMe&&点击我&/button&
//阻止事件冒泡
绑定值vue：vue动态绑定一个变量的值为元素的某个属性的时候，会在变量前面加上冒号：，例：&img :src=&imgSrc&/&微信小程序：绑定某个变量的值为元素属性时，会用两个大括号括起来。例：&image src=&&&&/image&
绑定事件传参vue：vue绑定事件的函数传参数时，可以把参数写在函数后面的括号里1&div @click=&changeTab(1)&&哈哈&/div&
微信小程序：微信小程序的事件我试过只能传函数名，至于函数值，可以绑定到元素中，在函数中获取12345&view data-tab=&1& catchtap=&changeTab&&哈哈&/view&// jschangeTab(e){
var _tab = e.currentTarget.dataset.
设置值vue：设置test的值可以用，this.test =获取test的值可以用this.test.微信小程序：设置test的值要用this.setData({test:true});获取test的值用this.data.test
广告位友情链接：微信小程序开发者遇到的一些问题 - 快资讯
需要开启 JavaScript 才能正常打开页面&一、小程序文档笔记
默认开发目录
开发目录解析
1.　&app.js、app.json、app.wxss 这三个文件必须有不能删掉。
&　　一个小程序主体部分由这三个文件组成，而且必须放在项目的根目录
js后缀的是脚本文件，调用小程序框架提供的 API——&
json后缀的文件是对整个小程序的全局配置文件——
　　微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中，用来激活。
　　例如，你没写他就会报这个错
&app.json文件的pages属性的路径配置与tabBar内的list属性的路径配置必须一一对应，协调一致，不然调用了哪个页面，二者中有一个没配置都不起作用
另外，pages属性是要一定一定要在引用页面的时候配置好路径。
就像官方文档说的：
【注意】json文件不要加任何注释信息，任何json文件都是这样；
wxss后缀的是样式表文件。是整个小程序的公共样式表
其他自定义文件夹下的页面中，wxml后缀的文件是页面结构文件。
2.　pages文件夹下的index 页面和 logs 页面
&pages 中的第一个页面是小程序的首页，一个小程序页面由四个文件组成。
index 页面——小程序的欢迎页
页面的样式表（.wxss文件)是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。
如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。【.json文件同理】
index.js、index.json、index.wxml、index.wxss——描述页面的这四个文件必须具有相同的路径与文件名
logs 页面——小程序启动日志的展示页
3.　　框架
小程序的核心—响应的数据绑定系统
即：在逻辑层修改数据，视图层就会做相应的更新
视图层（View）描述语言：wxml，wxss
逻辑层（App Service）框架：基于javascript
//util文件夹下的util.js
1 function formatTime(date) {
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()
var hour = date.getHours()
var minute = date.getMinutes()
var second = date.getSeconds()
<span style="color: #
<span style="color: #
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
<span style="color: # }
<span style="color: #
<span style="color: # function formatNumber(n) {
<span style="color: #
n = n.toString()
<span style="color: #
return n[1] ? n : '0' + n
<span style="color: # }
<span style="color: #
<span style="color: # module.exports = {
<span style="color: #
formatTime: formatTime
<span style="color: # }
判断时分秒是否大于10，不大于10，前边加一个0：
&n[1] ? n : '0' + n
4. & &pages属性——一个数组
每一项都是字符串，写入路径信息，来指定小程序由哪些页面组成。字符串之间用逗号隔开。
每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。
小程序中新增/减少页面，都需要对 pages 数组进行修改。
5. &&page.json
　　相当于app.json下的window里的设置，只不过多了第七条:disableScroll
　　disableScroll：true,
　　这个情况，设置了也没用，页面超出后照样滚动，问题待解决。
6. & &page.js
　　page(data):
　　data 数据必须是可以转成 JSON 的格式：字符串，数字，布尔值，对象，数组。
&7.　　wxs
该有的在文档都有：&https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxs/01wxs-module.html
以下是我实验的：
一个wxs还可以调用两个wxs甚至多个
多个页面可以嵌套调用，比如：b调a，c调b，那么在c里边也可以输出a里边的原始数据
文件a与其原始数据
文件b的调用
文件c的调用
注意，定义了变量还要输出变量：“exports”的拼写，另外对象里边的结构也总是写错，key：value，（键名、冒号、键值、逗号、最后一条没有逗号，更没有分号）
可以把js中的data的数据传入到wxs中，直接使用就好了。
&wxs src="./../tools.wxs" module = "toolJs"/&【可以闭合标签引入wxs页面】
直接把test.js中的数据当做参数传到wxs的函数中，调用得到boo函数的结果。如：{{toolJs.boo(msg)}}
tool.wxs截图在上边(是文件a的截图)，text.js文件截图如下
经验总结、实验代码如下
1 &view class="container"&
&view class="dir-header"&
scroll-view-y 垂直滚动练习
&scroll-view class="scroll-view" scroll-y enable-back-to-top bindscroll="scrollStart" bindscrolltoupper="scrollTop" bindscrolltolower="scrollBottom"&
自由滚动 练习
bindscrolltoupper="upper"
bindscrolltolower="lower"
<span style="color: #
bindscroll="scroll"
<span style="color: #
<span style="color: #
&view class="one"&第一部分&/view&
<span style="color: #
&view class="two"&第二部分&/view&
<span style="color: #
&view class="three"&第三部分&/view&
<span style="color: #
&view class="four"&第四部分&/view&
<span style="color: #
&view class="five"&第五部分&/view&
<span style="color: #
&view class="six"&第六部分&/view&
<span style="color: #
&view class="seven"&第七部分&/view&
<span style="color: #
&/scroll-view&
<span style="color: #
&view class="btn-area"&
<span style="color: #
&button class="btnScroll" size="mini"&鼠标移上去+滚轮滑动查看&/button&
<span style="color: #
<span style="color: #
&scroll-view class="scroll-view scroll-view1" scroll-y enable-back-to-top scroll-into-view="{{toView}}"&
<span style="color: #
&!-- 配合按钮点击tap函数，制作点击
<span style="color: #
scroll-into-view="{{toView}}"
<span style="color: #
<span style="color: #
&view class="one" id="one"&第一部分&/view&
<span style="color: #
&view class="two" id="two"&第二部分&/view&
<span style="color: #
&view class="three" id="three"&第三部分&/view&
<span style="color: #
&view class="four" id="four"&第四部分&/view&
<span style="color: #
&view class="five" id="five"&第五部分&/view&
<span style="color: #
&view class="six" id="six"&第六部分&/view&
<span style="color: #
&view class="seven" id="seven"&第七部分&/view&
<span style="color: #
&/scroll-view&
<span style="color: #
&view class="btn-area"&
<span style="color: #
&button class="btnScroll" size="mini" bindtap="tap"&点击我来切换内容哦&/button&
<span style="color: #
<span style="color: #
&scroll-view class="scroll-view scroll-view2" scroll-y enable-back-to-top scroll-top="{{scrollTop}}"&
<span style="color: #
&!-- 配合按钮点击tapMove函数，制作点击向上滚动指定距离效果
<span style="color: #
scroll-top="{{scrollTop}}"
<span style="color: #
&view class="one" id="ones"&第一部分&/view&
<span style="color: #
&view class="two" id="twos"&第二部分&/view&
<span style="color: #
&view class="three" id="threes"&第三部分&/view&
<span style="color: #
&view class="four" id="fours"&第四部分&/view&
<span style="color: #
&view class="five" id="fives"&第五部分&/view&
<span style="color: #
&view class="six" id="sixs"&第六部分&/view&
<span style="color: #
&view class="seven" id="sevens"&第七部分&/view&
<span style="color: #
&/scroll-view&
<span style="color: #
&view class="btn-area"&
<span style="color: #
&button size="mini" bindtap="tapMove"&点击我来实现内容滚动哦&/button&
<span style="color: #
<span style="color: # &/view&
1 .container{
padding:20rpx 0;
4 .dir-header{
font-size: 16px;
color: #aaa;
text-align: center;
font-weight: bold;
<span style="color: # .scroll-view,.scroll-view2{
<span style="color: #
height: 120px;
<span style="color: #
margin-top: 10px;
<span style="color: # }
<span style="color: # .scroll-view1{
<span style="color: #
height: 100px;
<span style="color: # }
<span style="color: # .scroll-view view{
<span style="color: #
height: 100px;
<span style="color: #
line-height: 100px;
<span style="color: #
text-align: center;
<span style="color: #
/* border: 1px solid #188 */
<span style="color: # }
<span style="color: # .one{
<span style="color: #
background: #f7f7f7;
<span style="color: #
color: #aaa;
<span style="color: # }
<span style="color: # .two{
<span style="color: #
background: #f1f1f1;
<span style="color: #
color: #c7c7c7;
<span style="color: # }
<span style="color: # .three{
<span style="color: #
background: #e9e9e9;
<span style="color: #
<span style="color: # }
<span style="color: # .four{
<span style="color: #
background: #e1e1e1;
<span style="color: #
<span style="color: # }
<span style="color: # .five{
<span style="color: #
background: #d8d8d8;
<span style="color: #
<span style="color: # }
<span style="color: # .six{
<span style="color: #
background: #d2d2d2;
<span style="color: #
<span style="color: # }
<span style="color: # .seven{
<span style="color: #
background: #c7c7c7;
<span style="color: #
color: #f1f1f1;
<span style="color: # }
<span style="color: # /*btn-area
<span style="color: # .btn-area{
<span style="color: #
margin-top: 10px;
<span style="color: # }
<span style="color: # .btnScroll{margin-right: 5px;}
1 // 变量定义区域
2 var scrollorder = ["one", "two", "three", "four", "five", "six", "seven"];
3 var scrollorder_s = ["ones", "twos", "threes", "fours", "fives", "sixs", "sevens"];
4 // 调用page方法api
* 页面的初始数据
<span style="color: #
toView: "one",
<span style="color: #
scrollTop: 100
<span style="color: #
<span style="color: #
<span style="color: #
* 用户的自定义数据
<span style="color: #
<span style="color: #
// 3条不同效果滚动事件的触发反馈
<span style="color: #
scrollStart: function (event) {
<span style="color: #
console.log("scrolling。。。");
<span style="color: #
<span style="color: #
scrollTop:function(){
<span style="color: #
console.log("到顶了");
<span style="color: #
<span style="color: #
scrollBottom:function(){
<span style="color: #
console.log("到底了");
<span style="color: #
<span style="color: #
// 点击一次按钮，向上滚动完一个view内容
<span style="color: #
// 自己加了判断条件，如果翻页到最后一个，就让他返回到第一个
<span style="color: #
// 这个i换成--，就可以做成轮播图的左右切换效果了
<span style="color: #
// 另外如果可以设置滚动一次的距离，就可以做成触摸效果的左右切换banner图了。
<span style="color: #
tap:function(event){
<span style="color: #
for(var i = 0; i & scrollorder. ++i){
<span style="color: #
if(scrollorder[i] === this.data.toView){
<span style="color: #
// console.log(i);
<span style="color: #
if (i == scrollorder.length-1) {
<span style="color: #
this.setData({
<span style="color: #
toView: scrollorder[0]
<span style="color: #
<span style="color: #
<span style="color: #
this.setData({
<span style="color: #
toView: scrollorder[i + 1]
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
// 点击按钮，向上滚动自定义距离的内容
<span style="color: #
tapMove:function(event){
<span style="color: #
console.log("点击了");
<span style="color: #
// 这个还得判断，如果滚到顶部了就让他变回来或者提示
<span style="color: #
// 另外，100 和 7 可以后期动态判断
<span style="color: #
if(this.data.scrollTop &= (100 * 7)){
<span style="color: #
console.log("您已经查看底部了哦")
<span style="color: #
<span style="color: #
this.setData({
<span style="color: #
// 这里，如果最后加100，并且总盒子scroll-view的高度也是100的话，可以模拟tapMove的效果，点击一下就是翻一页
<span style="color: #
// scrollTop: this.data.scrollTop + 100
<span style="color: #
scrollTop:this.data.scrollTop + 20
<span style="color: #
<span style="color: #
<span style="color: # })
　　　　&block/&&并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性（想wx:if，wx:else，wx:for等）。
——template
模板定义：
template，双标签，且要给他起一个独一无二的name
&template name=“onlyName”&模板内容&/template&
模板中也可以放变量，调用的时候再传入不同的数据。方便重复调用：
&template name=“onlyName”&
&view &{{text}}&/view&
&/template&
模板引用：
通过import引用、调用目标文件中&template&中定义的内容
调用某个wxml页面中定义好的模板部分，template处用is调用
<span style="color: # &import src=“定义模板的页面路径”/&
<span style="color: # &template is=“要引用的模板的name值”/&
template的is中可以使用Mustache语法，里边放判断用的三元表达式，这样就可以动态性的根据需求渲染模板。
文档案例：
在模板页面设置的css样式，调用到另一个页面后，是不受管制的，所以可能需要复制一份css样式到调用的页面，或者把模板用到的css写到公用样式app.wxss中。
还有一种方法是调用wxss文件：@import方法：
@import "../about/about.wxss";
这个方法，可以把about.wxss里边的样式全部调到目标页面，但是还是建议公用的代码放到app.wxss中。
调用带数据的模板：
&template is="aboutTwo" data="{{msg:'我是index.wxml里边传入的数据'}}"/&
目前用这种，在template标签上放data属性来传入数据值得方法。但是如果数据多了咋办？那就要想怎么把数据放到js文件的data中，然后在template中调用。
永远记住一点
想要传入多个参数，可以试试三个点的符号加对象/数组名字的方法，这在es6中的新方法，在vue，小程序，甚至pug中都可用，真的很好用。
&template is="aboutTwo" data="{{...对象名}}"/&&
模板（template）的作用域：
模板拥有自己的作用域，所以js数据不会跟着模板结构被引过来，就和css也没过来一样，只能使用data传入的数据。不过可以把这些公共的数据放到app.js的data中，公用。
下边是demo代码： &17:19:42
&view class="cont"&
&view class="block"&template模板学习--import引用&/view&
&import src="../about/about.wxml" /&
&template is="aboutOne" /&
&view class="info"&模板具有作用域——以上这种，在b页面里引用了a，再在c页面里引用b，那么在c里边智能显示b里边的内容，a模板里的不会显示&/view&
&view class="block"&带数据的模板——数据传输失败&/view&
&import src="../about/about.wxml" /&
&template is="aboutTwo" /&
&view class="info"&模板带有数据，在about.wxml里边有一个变量，变量的值放在about.js中，但是引用到index页面后，变量没渲染出来，这说明了，js数据不会跟着模板结构被引过来，就和css也没过来一样。&/view&
&view class="block"&带数据的模板2——本页定义数据&/view&
&import src="../about/about.wxml" /&
&template is="aboutTwo" data="{{msg:'我是
index.wxml
里边传入的数据'}}"/&
&view class="info"&模板里边的数据没有进来，但是在调用的时候，我们传入了一个数据，他也正常解析了。看来，在调用的页面，传入当前页面需要的对应值才是正解。&/view&
&view class="block"&带数据的模板3——本页js文件定义数据&/view&
&import src="../about/about.wxml" /&
&template is="aboutTwo" data="{{...dataInfo}}"/&
&view class="info"&在标签里边传数据是很不明智的，万一数据多了就麻烦了，这次测试把需要的数据放到index.js文件中，然后在data属性这里先放三个点点，再放一个对象名。欧了，其他任何多少个数据都可以在js文件中罗列了。不过名字要和模板所在页的变量名字相同，不然找不到数据的
index.wxml
1 &template name="aboutOne"&
&text&pages/about/about.wxml&/text&
3 &/template&
4 &template name="aboutTwo"&
&view class="info"&我是带数据的模板的说明部分&/view&
&text&{{msg}}&/text&
7 &/template&
src="../logs/logs.wxml" /&
<span style="color: # &template is="logOne"/&
about.wxml
<span style="color: # &template name="logOne"&
<span style="color: #
&view class=""&我是logs.wxml模板里边的内容&/view&
<span style="color: # &/template&
1 about.js
msg: "我是about里边的数据",
7 index.js
<span style="color: #
motto: 'Hello World',
<span style="color: #
userInfo: {},
<span style="color: #
dataInfo: {
<span style="color: #
msg: "我是放在
里边的数据哦！",
<span style="color: #
msg2: "我是放在
里边的数据哦！",
<span style="color: #
msg3: "我是放在
里边的数据哦！",
<span style="color: #
msg4: "我是放在
里边的数据哦！",
<span style="color: #
msg5: "我是放在
里边的数据哦！",
<span style="color: #
msg6: "我是放在
里边的数据哦！",
<span style="color: #
<span style="color: #
about.js+index.js
——inport 作用域
先说一个官方文档中的说法：
　官方文档的这种做法，应该在B.html定义的b模板中调用A中的a模板
&!-- B.wxml --&
&import src="a.wxml"/&
&template name="B"&
&text& B template &/text&
&template is="A" /&
&/template&
亲测有效，这样就可以连环调，不过有缺陷就是，如果a里边的内容是交叉放在b里边的，就没办法这样做了，毕竟在c里边调取的是一整个b，就没办法再拆开穿插了。
——include 引用模板页面
注意两点：
include引用除&template&模板以外的一整张页面的内容：
include引用的是一整个页面，如果目标页面当中有template模板的话，template里边的内容不会被调取出来。
但是，A页面通过include，可以调用到B页面里边通过import调取来的C页面的内容 :
即、A页面include目标页面为B页面，如果目标页面B中使用import和&template is=“C页面模板名字”&配合调用了第三个页面C里边的内容C-C，那么第三个页面的C-C内容也会在A页面里显示出来。
C页面（logs.wxml）的 C-C内容 :
<span style="color: # &!--logs.wxml--&
<span style="color: # &template name="logOne"&
<span style="color: #
&view class=""&我是about从logs.wxml调用的模板里边的内容&/view&
<span style="color: # &/template&
B页面（about.wxml）的内容：
里边包含普通文本、&template name=""&定义的模板文本、import调用C页面内容的命令文本
1 &!--pages/about/about.wxml--&
2 &view &只有我是about页面中没有在模板里边的部分&/view&
4 &!--定义模板
5 &template name="aboutOne"&
&text&pages/about/about.wxml&/text&
7 &/template&
8 &template name="aboutTwo"&
&view class="info"&我是带数据的模板的说明部分&/view&
<span style="color: #
&text&{{msg}}&/text&
<span style="color: # &/template&
<span style="color: #
<span style="color: # &!--调用logs.wxml的模板
<span style="color: # &import
src="../logs/logs.wxml" /&
<span style="color: # &template is="logOne"/&
about.wxml
A页面（index.wxml）里调用B页面（about.wxml）的命令：
<span style="color: #
&!--include about.wxml里边的内容 --&
<span style="color: #
&view class="block"&include引用模板学习&/view&
<span style="color: #
&view class="info"&include引用页面，但是目标页面当中在template里的那部分内容不会被调过来。&/view&
<span style="color: #
&include src="../about/about.wxml" /&
<span style="color: #
&view class="info info-error"&神奇的是：include引用了目标文件中调用的第三方页面模板里的内容&/view&
index.wxml
A页面的显示：
二、小程序组件大纲——版本
input的type类型详解：
关于picker的multiSelector的mode详解：&
三、小程序困惑：
1.问：小程序的文本换行？即原来html中的&br /&标签，在小程序中可以用什么模拟？
<span style="font-family: &Microsoft YaHei&; color: #.答：小程序text文本组件支持转义字符，那么\n就可以用来换行。示例如下：
&text&小程序\n换行&/text&
2.问：小程序的弹窗提示怎么做？即原来js中的alert功能，在小程序中可以用什么模拟？
<span style="font-family: &Microsoft YaHei&; color: #.答：使用console.log调试
3.小程序的页面跳转？即原来html中的a链接标签，在小程序中可以用什么模拟？，
<span style="font-family: &Microsoft YaHei&; color: #.答：用navigator或用js编码配置来实现小程序的页面跳转。
navigator如下：设置open-type为switchTab（导航间页面切换）或者reLaunch（应用内部跳转）,
&navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover"&切换 Tab&/navigator&
这样点击“切换 Tab”文字就能进行跳转。
js如下，在wxml页面给view等组件绑定bindTap点击事件，然后js页面中配置事件时，让其navigateTo（跳转到）、并指定目标链接即可
问：如何跳转到指定的外部链接？
四、小程序开发问题汇总
Padding的问题
一定要计算在宽度里边
若宽度是百分百，则尽量用内部内容的margin解决，不然会撑开页面，导致左右滑动的
不计算在里边，就用box-sizing设置一下
字体大小、间距问题
手机看和电脑看有差距
所以涉及到的时候，要定可适应性的死宽度比较合适，不光自己，其他也是一样，不同的界面看，
虽然margin、padding一致，但是屏幕宽度不一样，最后留下的间隙就会有便宜，出现问题。
& &11:28:23
模拟机可以css调用背景图但是真机不显示background-image
<span style="color: #
background: linear-gradient(to right, rgba(0,140,201,0.8),rgba(0,158,165,0.8)),url('https://pic.cnblogs.com/avatar/.png') no-repeat center/
上边那张图片高兴地太早了，真机测试的时候，那张图根本就出不来。
仔细想想，我这张图是用的background-image。我想我学的知识真的是喂了狗了。
在小程序的开发文档（）中有这么一句话被我抛在了脑后：
既然如此，不废话，那就寻找解决/替代方法吧：
解决办法总是有的，不就是网络图片吗！我让这些图在我自己测试的时候，先调取个人网络空间地址啊，做上标记，等到上线的时候把连接再改过来就好了。
至于base64：
& &&这是一个base64在线转码的网站。可以转换字符或者图片的编码。
这个网站，
第一步选择图片编码的tab，
第二步选择本地文件，
第三步复制编码，
第四步把这逆天的代码链接复制到对应的url中去。
& &16:49:44
rpx和px的使用场景
字体大小、宽度等要用到rpx，并且数值是px的两倍。不然小的设备观看是会被截掉的。
px用在margin、padding啥的上边。重点是上下边距和间距，左右的也可能要自适应式的、
溢出隐藏+小标点符号不能显示
溢出隐藏+小标点符号不能显示，不知道是配错组件还是因为啥。有待实验。
我没有实现的情况是：view里边套了text，给view溢出隐藏的三条代码没用，把代码给了text并设置其display为block也不出效果
小程序本页面内楼层跳转
用到scroll-view组件：
讲解页面：组件文档：大致思路就是：把所有需要滚动、跳转的东西都放到scroll-view中，然后给scrol-view一个scroll-into-view属性，
属性值用变量表示，在js数据中进行判断点击的是哪个按钮，传参改变scroll-into-view的值。
这种想法是可以，但是不适合我本次项目。毕竟scroll-view要设置固定的高度，如果没有固高，scroll-into-view根本不起作用
如何让传入的json数据渲染到页面后，带组件的标签格式？或者正确区分并翻译我的组件代码和文本？
比如我json里这么写：
翻译结果—：
这么做翻译不出来。其他方法有吗？我想在json中插入图片
哈哈，我用了if判断，json中有链接的地方我就给他显示这一组view组件，否则就是另一组：
Json数据中这样写：
这样有图片地址的就会调用图片地址，并且把结构写成if的情况，没有picsrc的就会直接一个text组件！
关于页面跳转
我用的js的跳转方法，加一个点击监听，bindtap后执行函数wx.navigateTo 但是没反应老报错，
一直返回跳转失败和跳转完成的函数内容。后来才发现，是我没有在app.json里边加入新增加的页面，导致跳转不成功的。
以下是报错截图
所以app.json的页面注册真的很重要，切记切记！大问题。
——跳转路径src的填写
直接写路径名即可，不用加.wxml，不然报错。
跳转到应用内、非tabBar页面
就是说你src的链接处填写的页面，不能是外部链接，并且内部的页面现在app.json上注册了，
并且不是tabBar正在使用的页面，并且链接的书写方式不能加后缀名字！！才可以跳转成功！因此看来，
要跳转到该页面时，在页面的命名上，wxml页面和其他js、css页面不能重名？
经过试验，是可以重名的——如下:因为我注册text页面的时候，自动加了其他三个同名的文件，
但是最后我调用这个目录下的text名字文件时，依旧跳转成功，看来他自己只认wxml
五、小程序技巧
页面加载后切换一次类名，实现初始页动画展示、初始页切换类名、配合一次性定时器切换类名
<span style="color: # onLoad: function (options) {
<span style="color: #
<span style="color: #
setTimeout(()=&{
<span style="color: #
<span style="color: #
this.setData({ a: 'a-class-name', b: 'b-class-name' })
<span style="color: #
<span style="color: #
返回顶部 效果
&要配合scroll-view组件、wx:if功能、、、、具体代码如下：
主要是scroll-top这个属性目前在微信中是scroll-view组件支持的，所以需要他配合完成。
<span style="color: # &scroll-view class="scrollview-style" scroll-y bindscroll="wrapScroll" bindscrolltolower= "scrolltolower" scroll-top="{{scrollTop}}"&
<span style="color: #
&view class="toTop" bindtap="goTop" wx:if="{{floorstatus}}"&返回顶部&/view&
<span style="color: # &view&接下来的其他各种内容。。。&/view&
<span style="color: # &/scroll-view&
html代码解析:&
scroll-view作为整个页面的大package，所有页面内容都要放在滚动组件内部
至于返回顶部按钮，因为是要固定在页面底部的，所以可以不放在scroll-view组件中，这里我放进去了。
1 .scrollview-style {
background: #fff;
position: absolute;
bottom: 0;
<span style="color: # <span style="color: # .toTop {
<span style="color: # 11
position: fixed;
<span style="color: # 12
background: #f4f5f5;
<span style="color: # 13
border: 1px solid #ddd;
<span style="color: # 14
right: 40rpx;
<span style="color: # 15
bottom: 40rpx;
<span style="color: # 16
z-index: 999;
<span style="color: # 17
width: 26px;
<span style="color: # 18
height: 26px;
<span style="color: # 19
padding: 8px;
<span style="color: # 20
text-align: center;
<span style="color: # 21
line-height: 14px;
<span style="color: # 22
border-radius: 50%;
<span style="color: # 23
font-size: 12px;
<span style="color: # 24 }
css代码解析：
croll-view给了一个绝对定位，不过他的上下左右皆是0，这样目的是为了把scroll-view撑开。
不过经过我后来的测试，把绝对定位这一套代码删掉，然后只要有scroll-y属性都是可以的，
关键是这个属性，放在scroll-view内的所有内容组成的页面才可以滚动。
然后返回顶部这个按钮的样式就没啥好说的了。
根据自己想要的效果随便设置了，但是fixed固定定位肯定是少不了的。
——data配置
scrollTop: 0,
floorstatus: false
先说初始数据这里，
因为wxml中要调取，所以会需要一个初始数据放在data这里：
scrollTop是对应scroll-view这里的距离顶部距离，初始是0。
Floorstatus这里是定义返回顶部按钮的初始渲染状态，初始值为false，
这样wx:if进行判断为否的话，view那条代码就不会被渲染，我们在页面中就看不到按钮，因为他没有被编译出来，死在了if手上。
——函数配置
1 //scroll-view组件的滚动事件函数
2 wrapScroll: function (e) {
if (e.detail.scrollTop & 500) {
this.setData({
floorstatus: true
this.setData({
floorstatus: false
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: # //返回顶部按钮的点击事件
<span style="color: # goTop: function (e) {
<span style="color: #
//console.log("点击了我了");
<span style="color: #
this.setData({
<span style="color: #
scrollTop: 0
<span style="color: #
<span style="color: # }
之后开始动态的改变这两个值进而改变页面的呈现效果：
scroll-view给一个滚动的事件监听wrapScroll，当页面滚动的时候他就判断scroll-top的大小，如果大于我们设定的值（这里是500）的时候，他就执行一条设置数据的代码，否则就执行另一条设置数据的代码。
而他设置的数据为设定返回顶部按钮的渲染状态值——如果大于500就设置data里边的Floorstatus为true，反应到wxml中，if条件成立，就渲染view组件。进而我们就能看到他了。反之不渲染我们就看不到这个按钮。
至于返回按钮的那个点击事件goTop，原理上就是要点击他，改变scroll-view的高度值，所以在函数中，直接setData，改变高度值为0，反映到页面上的效果就是页面返回到了顶部。
从这里逻辑中，我觉得收获最大的是用if判断值，动态改变一个变量等于false还是ture，然后在wxml中再if判断，变量等于false还是ture，这样就能千回百转的完成逻辑。
我就说if是个好东西，把我们的思维传递给电脑。因为他只分是非，而人类有时候却分不了是非。。。
动态的添加内容、渲染结构
wx:for功能——列表渲染！！
重复的结构都可以用其配置，然后传数据就ok；
另外，配合wx:if、wx:else来判断并动态选择将参数传入哪个结构中
Console.log(event)
Event::事件对象，方法在执行的时候，当前环境携带的一些信息
可以打印出来、获取很多信息，根据这些信息再度寻找你需要的信息的路径。如小程序里的event.detail.;;;
关于rpx单位的用法：
rpx是用来自适应的，设计图是750px的模式下，用rpx直接一比一复刻建模，出来后就是标准的i6的界面，也能自适应绝大多数页面了
不过有些小的5px、3px、1px啥的间距或border，我就用px了，
可以大概记忆：1px = 2当然这么说很不科学，他们并不全等，但是做页面的时候这么想着可以很快地计算粗大概的数值。
巧用if判断和for循环搭建结构
判断真的好用，在这个代码中，没有数据的时候，下边的结构就不会渲染出来。
还可以利用判断显示隐藏、添加删除类名啥的，达到自己想要的效果。
如何实现“万能（不管内部文字极限）”垂直居中
见我另一篇博文的总结：http://www.cnblogs.com/padding1015/p/6194422.html
终于研究出来怎么让Scroll-x实现横向滚动拉！！&
代码关键：
Scroll-view关键css： width：100%；scroll-x=“true”
里边view-wrap的关键css：width：要多长有多长px；（确保日后所有内容都能装下），不清楚浮动
最里边的image/内容：float：left；
具体如下：
六、小程序友情链接：
公众平台登录网页：
小程序社区：http://developers.weixin.qq.com/
微信小程序你不知道的事（小程序系统文章）：
　　请尊重博客园原创精神，转载或使用图片请注明：
　　博主：xing.org1^
　　出处：http://www.cnblogs.com/padding1015/
阅读(...) 评论()