微信小程序 (一)

1.列表循环wx-for={{arr}}

2.条件渲染

3.最外层的block和最外层view。

(1)view包裹的

(2)block包裹的

区别:block能够提高性能

4.hidden控制显示和隐藏

 

5.wx:if与hidden的对比

(1)wx:if

通过移除的方式来控制元素的显示和隐藏,直接将DOM进行移除

(2)hidden

通过CSS的方式来控制元素的显示和隐藏

 (3)如果频发的进行隐藏建议使用hidden

6.rpx

(1)rpx是微信小程序独有的,用来解决屏适配的尺寸问题。

(2)原理:

rpx的实现原理非常简单:鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx

把所有设备的屏幕,在宽度上等分为750份（即:当前屏幕总宽度为750rpx)。

1. 在较小的设备上,1rpx所代表的宽度较小。

2.在较大的设备上，1rpx所代表的宽度较大。

小程序在不同设备上运行的时候,会自动把rpx的样式单位换算对应的像素单位来渲染，从而实现屏幕适配。

(3)rpx与px之间的单位换算:

在iphone上,屏幕宽度为375px,共有750个物理像素,等分为750rpx。则:

750rpx=375px=750物理像素

1rpx=0.5px=1物理像素

在inphone6上1px等于2rpx。

(4)建议

官方建议:开发微信小程序时,设计师可以用iPhone6作为视觉稿的标准。

7.样式

(1)样式导入

公共的样式:

导入：

(2)全局样式与局部样式

作用范围:

全局:所有的样式 

文件: app.wxss

全局:当前的样式 

文件: xxx.wxss

(3)全局和局部冲突的时候

1.就近原则,局部的样式会覆盖全局的样式

2.例子:

全局:

 局部:

就近原则:

八.常用的全局配置项以及小程序窗口的组件部分

(1)小程序根目录下的app.json文件是小程序的全局配置文件,常用的配置如下:

1.pages

记录当前小程序所有页面的存放路径

2.window

(1)配置项

 如设置导航栏的标题:

 开启全局的下拉刷新:

 注意点:

下拉刷新背景样式:

下拉刷新时loading的样式:

         

设置上拉触底的距离:

        

默认的像素是50px,在实际开发中默认用50rpx就行了。

         

3.tabBar

设置小程序底部的tabBar效果

 

 代码:

 

4.style

是否启用新版的组件模式

5.扫码预览        

 

九.网络数据请求

(1)两个限制:

1.只能请求https类型的接口

2.必须将接口的域名添加到信任列表中

 

 配置request合法域名

1.配置一个合法域名

 

2.登录微信小程序的后台

 

 

 

配置多个:

 

当前面板就更新了 

2.发送get请求

(1)例子

 

3.发送post请求

 

4.在页面刚加载时请求数据

在onload里面可以进行调用相当creatd函数。

5.跳过request合法校验

如果后端程序员仅仅提供了http协议的接口，暂时没有提供https协议的接口。

为了不耽误开发进度，临时开启

 项目正式上线的时候还是使用https协议。

6.跨域和Ajax技术

跨域问题只存在关于浏览器的web开发中,由于小程序的宿主环境不是浏览器,而是微信客户端

所以小程序不存跨域的问题。

Ajax技术的核心是依赖于浏览器中的XMLHttpRequestt这个对象,由于小程序的宿主环境是微信客户端，所以小程序中不能叫做发起AJax请求 而是叫做发起网络请求。