微信小程序实战（2）

常用指令

在wxml中使用的常用指令

1，wx:if="{{true}}/{{false}}"

2，wx:for={{contents}}，在使用for循环的时候需要在整个块外面包裹一个block标签，然后在block标签上使用wx:for，另外contents数组对象不能直接使用this.setData(contents);而是使用this.setData({contents:contents})；在wxml使用时，每个对象通过{{item.xxx}}来获取每个属性，item 为内置的for循环对象的每个对象。也可通过wx:for-item="item" wx:for-index="index"来指定下标名和每个对象别名

3，事件点击捕捉命令 bind:tap="xxx"，其中的xxx就是在js中需要定义的事件名方法。通过点击后触发函数执行

catch:tap="xxx"也能达到相同的效果。

catch与bind区别：

都能捕获事件

catch会阻止事件传播，而bind不会阻止事件传播 即 当捕捉到子标签事件时，如果父标签也有事件，则捕捉会传播，父标签也会执行事件捕获。

mut-bind:tap="xxx"---------互斥事件，即多个mut-bind不会由于冒泡都执行

参照：微信小程序MINA框架（数据绑定，事件操作，内部页面跳转，消息提示框，模态对话框 ...... ） - 知乎

4，路由跳转

在js中可通过 wx.navigateTo({

url:"/pages/posts/posts"

});

navigateTo跳转的页面为子页面，在子页面的左上方会有一个返回的箭头

在小程序中最多跳转的子页面最多只有10个，最开始的时候是5个。会保留当前页面

在js中可通过wx.redirectTo({

      url: "/pages/posts/post",

    })

redirectTo跳转的页面不会带返回箭头，但会有返回到home首页的箭头。不会保留当前页面

data-xxx 用来绑定某个属性变量，可以通过event对象中的data来获取到绑定的该变量值。其中xxx是实际的变量名，可以指定多个data-xxx。另外，data-xxx中如果xxx为驼峰命名，实际的xxx会改为小写连接命名。如果需要用驼峰，可以将data-xxx中xxx写成用"-"来连接，最后会被转成驼峰命名。

----------------------------------------------------------------------------------------------------

小程序常用标签学习

1，显示图片：image标签

2，文本：text标签

3，按钮：button标签，一般在项目中的按钮不直接用button，而是用view标签包裹text标签，通过样式来设置成按钮(因为涉及到样式，可能还会有背景图片，直接用不太好)

4，view标签相当于div容器，常用来布局。

5，swiper滑动容器组件

在使用swiper组件设置滑动图片时，除了需要在swiper标签中的image标签上设置style属性外，还需要在swiper标签上设置style属性

属性说明

indicator-dots：是否显示指示点，需要注意的是 该属性值如果直接写false，则结果还是当作true处理，需要加上双括号，即{{false}} autoplay：是否自动轮播

---------------------------------------------------------------------------------------------

小程序样式学习

1，image标签style属性设置样式，如 style="width:200px;height:200px"

2，rpx与px区别：px一般用于在任何机型都显示一样的样式大小；而rpx则是可以根据不同机型来自动调整样式大小。iphone6标准机型：实际看到的图片的像素/2=图片大小(px)。1px=2rpx(条件是在iphone6机型情况下)

3，margin-top：距离上边框距离

4，flex使用：

.container{ display: flex;//使用flex布局 flex-direction: column;//垂直布局 align-items: center;//居中 }

5，文本

font-size：字体大小 font-weight：字体加粗 line-height：文本行高 letter-spacing：文本间距

6, 边框

border: 1px solid #405f80;/*添加设置边框*/ border-radius: 5px;/*设置边框边角*/

7，文字在边框内的水平、垂直居中

text-align: center;/*文本水平居中*/ line-height: 80rpx;/*文本的高度与边框高度保持一致*/

8，设置小程序应用最上边框的背景色，在app.json中设置

"window": { "navigationBarBackgroundColor": "#b3d4db" },

9，居中

vertical-align ：居中设置 # flex布局中的居中设置 align-items: 设置子元素在交叉轴上分布的位置(一般是垂直) justify-content：设置子元素在主轴上分布的位置(一般是水平)

10，浮动居中设置

position: absolute;//脱离当前容器，相对于整个页面的绝对浮动

left: 50%;

margin-left: -51rpx;

top: 185rpc

-------------------------------------------------------------------------------------------------

常见报错及解决

1，[ app.json.json 文件错误] app.json: Empty file is NOT a valid json file(env: Windows,mp,1.06.2208010; lib: 2.19.4)

出现该类错误，大多数情况下是因为 json文件中的内容有问题，需要检查下json的语法和格式是否正确