小程序学习笔记

1、rpx:是微信小程序的自适应的单位,根据不同设备的屏幕宽度进行自适应缩放。 

2、小程序规定任何型号的手机的屏幕宽度都为 750rpx。

3、小程序中常用的组件:view、swiper(滑块视图容器—轮播图的盒子)和swipe-item(轮播图的每一项)、textnavigatorscroll-view字体图标

4、image组件 ,常用的属性有4个

(1)src图片的地址

(2)mode:图片剪裁、缩放的模式

(3)show-menu-by-longpress:长按图片显示的菜单,复制,收藏,保存,转发等

(4)lazy-load:图片懒加载 (在滑动到上下三屏)以后展示图片

5、text组件:常用的属性有两个:

(1)user-select:本文是否可选,用于长按选择文本

(2)space:显示连续空格 ensp:显示空格(中文空格一半大小);emsp(中文空格);nbsp:根据字体设置的空格大小

注意事项:如果想实现长按选择文本只能使用text组件;text组件内只支持text嵌套

6、navigation组件:

   (1)url当前小程序的跳转链接  

   (2)open-type :跳转方式

注意事项:

    (1)页面跳转时,url内的路径需要在前面加上 / 斜线,否则跳转不成功

    (2)open-type的值为 navigate 、redirect 只能跳转到非TabBar页面,不能跳转到TabBar页面;navigate 保留上一级页面,又返回。redirect没有返回上一级,即会关闭上一级页面,只能返回到首页。

    (3)值为switchTab:只能跳转到TabBar页面不能跳转到非TabBar页面

    (4)reLaunch:关闭所有有页面,然后打开小程序中某一个页面。

    (5)navigateBack:返回上一页或者返回前几页,默认只能返回上一页,如果返回前几页,需要加上delta属性,需要返回几 delta的值就是几

    (6)传参使用?连接,属性名和属性值使用功能=号,如果需要传多个属性,使用&连接符。通过生命周期函数onLoad(options)中options接收参数。

    (7)open-type的值为switchTab属性时不能传参,不起作用

7、scroll-view组件

实现内容的滚动效果。scroll-x允许横向滚动,scroll-y允许纵向滚动。

8、阿里巴巴字体图标

使用字体图标可能会报错:【渲染层网络层错误】Failed to load font.....,该错误可忽略。

但在控制台出现错误,会影响开发调试,解决方案是:将字体图标转换成base64的格式。

9、小程序背景图可以使用background-image设置,到那时不能写本地路径background-image:url(../../img.png)

可以使用网络地址或者将图片转换成base64的格式,然后进行使用。或者使用image替换background-image

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容