微信小程序 (一)

发布时间:2023-11-19 12:30

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

微信小程序 (一)_第1张图片

微信小程序 (一)_第2张图片

2.条件渲染

微信小程序 (一)_第3张图片

微信小程序 (一)_第4张图片

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

(1)view包裹的

微信小程序 (一)_第5张图片

(2)block包裹的

微信小程序 (一)_第6张图片

区别:block能够提高性能

4.hidden控制显示和隐藏

微信小程序 (一)_第7张图片

 微信小程序 (一)_第8张图片

5.wx:if与hidden的对比

(1)wx:if

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

(2)hidden

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

微信小程序 (一)_第9张图片

 (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)建议

微信小程序 (一)_第10张图片

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

7.样式

(1)样式导入

公共的样式:

微信小程序 (一)_第11张图片

导入:

微信小程序 (一)_第12张图片

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

作用范围:

全局:所有的样式 

文件: app.wxss

微信小程序 (一)_第13张图片

全局:当前的样式 

文件: xxx.wxss

微信小程序 (一)_第14张图片

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

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

2.例子:

全局:

微信小程序 (一)_第15张图片

 局部:

微信小程序 (一)_第16张图片

就近原则:

微信小程序 (一)_第17张图片

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

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

1.pages

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

2.window

(1)配置项

微信小程序 (一)_第18张图片

 如设置导航栏的标题:

 开启全局的下拉刷新:

 注意点:

下拉刷新背景样式:

下拉刷新时loading的样式:

         

设置上拉触底的距离:

        

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

         

3.tabBar

设置小程序底部的tabBar效果

微信小程序 (一)_第19张图片

微信小程序 (一)_第20张图片 

 代码:

微信小程序 (一)_第21张图片

 

4.style

是否启用新版的组件模式

5.扫码预览        

微信小程序 (一)_第22张图片

 

九.网络数据请求

(1)两个限制:

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

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

微信小程序 (一)_第23张图片

 

 配置request合法域名

1.配置一个合法域名

 

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

微信小程序 (一)_第24张图片

 

 微信小程序 (一)_第25张图片

 

微信小程序 (一)_第26张图片

配置多个:

微信小程序 (一)_第27张图片

 

当前面板就更新了 

微信小程序 (一)_第28张图片

2.发送get请求

(1)例子

微信小程序 (一)_第29张图片

 

3.发送post请求

微信小程序 (一)_第30张图片

 

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

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

5.跳过request合法校验

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

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

微信小程序 (一)_第31张图片

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

6.跨域和Ajax技术

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

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

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

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号