微信小程序项目技巧总结

一、view的边框设置

边框设置要使用border,对其样式,宽度颜色等属性进行设置后方可使用。

阴影设置为box-shadow,一般也算入边框设置里。

微信小程序border使用总结

二、横线滚动布局

微信小程序横向滚动布局scroll-view使用

scroll-view用于小程序中滚动布局的设置。

通过设置scroll-x、scroll-y属性确定展示方向。

white-space: nowrap; 这个属性一定要设置,不然显示起来会自动换行。

三、wx:for循环设置

当我们想要循环设置一些复用的组件时,使用wx:for循环。

注意,这个语句直接加在组件的属性设置里即可。加在哪个组件里,就会对哪个组件生效,循环设置该组件。不需要外层嵌套。

四、字体大小与是否加粗

font-size用于设置字体大小。

font-weight用于设置字体加粗。

五、每一个子项中,布局的横纵设置

微信小程序flex布局使用技巧

flex布局可以设置其布局内内容的横向、纵向展示方式。

flex-direction定义了方向

flex-wrap定义了换行规则

flex-flow是将方向和换行规则合并起来的简写方式。

六、同一数据源,如何设置两列纵向布局

微信小程序中,数据源循环设置使用wx:for语句,这个语句只能做简单循环处理。

想要实现两列,多列,多行的展示形式,就需要我们进行设计。

进行两列展示时,实际上是用同一种数据源循环2次,左侧取奇数,右侧取偶数时展示,其他的隐藏掉。

此方法同理可以用到多行多列的扩展。

后期若有更好的方式,及时更新。

七、每一个内容模块内,子项位置摆放

1、子项自动换行

父布局使用flex模式,同时设置flex-direction为column,纵列展示

2、叠层布局

如何让子布局显示在父布局之上,类似于android的framelayout或者relativelayout

父布局使用position:relative

子布局使用position:absolute

这样子布局就可以根据top,left,bottom,right四个方位相对于父布局进行定位了。

之后子布局(其实是容器)中在设置自身display:flex,align-items:center, justfy-content:center就能实现子布局内容水平垂直居中。

这个嵌套层数会很多,属于粗糙的实现方法,以后有更好的进行更新。

3、列表布局最后一个内容距右侧距离加大

项目中长遇见的情况,一个横向列表,滑到最右侧,应有加大的间距。

土方法:在每一个布局中右侧添加一个间隔,直到最后一个子项时才将其显示,其他均为隐藏。

八、文本超出部分自动换行

在文本控件的wxss样式中设置white-space:pre-line属性。

微信小程序文本自动换行问题

九、父布局宽度适应子布局内容

可以设置min-width为最小宽度,超出则自适应。

十、3列布局,左右固定宽度,中间填充满

中间布局增加属性,flex:auto

十一、子布局在父布局居中显示

父布局设置display:flex,只有在设置水平及垂直轴上的属性。

align-items:center; 垂直居中

justify-content:center;水平居中

附加条件可能为上下或左右需要父布局拥有固定大小,否则无法测量使其居中。

十二、设置圆形图片

简单操作:image控件宽高设置一致,之后设置border-radius为宽高数值的一半,即半径长度。便可实现原型图片。

复杂操作:在canvas上绘制时使用代码进行计算绘制。

十三、布局中设置权重

flex布局中可以设置权重,flex:1,如果一横排或一竖列所有元素权重一致,则平分布局。

十四、布局绑定事件与传参

布局绑定事件

bindtap和catchtap都可以绑定事件,区别在于bindtap不会阻止事件冒泡,catchtap可以阻止事件冒泡。

在布局控件定义时加上属性bindtap="onClick",其中onClick是事件方法名。之后要在对应的js文件中定义onClick的具体操作。

声明事件的同时,如果有传参,需要使用data-xxx的形式定义传参的参数名称。

之后在js文件中通过event.currentTarget.dataset['xxx']的形式获取点击事件的传参。

十五、控制文本最多显示2行超出部分省略

普通需求,设置over-flow:hidden以及text-overflow:ellipsis属性,同时设置display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;借用了-webkit-box样式,设置了展示方向及行数。

增强版需求,若此文本前面还有一个标题内容,则由于设置了box类型,会导致显示异常。

研究rich-text

十六、微信小程序页面跳转

tab页面跳转:wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面,只能用 wx.switchTab 跳转到 tabbar 页面。此方法不允许携带参数。若业务要求使用参数,可以在跳转时设置全局变量,来到跳转页面后调用全局变量满足业务要求。

普通页面使用wx.navigateTo 和 wx.redirectTo ,前者是最普遍的跳转方式,会保留当前页面。后者则会先关闭当前页面在跳转。

wx.reLaunch 关闭所有页面,打开到应用内的某个页面。

跟wx.redirectTo 一样左上角不会出现返回箭头,但两者却不完全相同
 

这里要提到小程序中的  getCurrentPages() 方法
 

在wx.navigateTo中,每跳转一个新的页面,其原始页面就会被加入堆栈,通过调用wx.navigateBack(OBJECT)可通过获取堆栈中保存的页面 返回上一级或多级页面;

wx.redirectTo,方法则不会被加入堆栈,但仍可通过wx.navigateBack(OBJECT)方法返回之前堆栈中的页面 

wx.reLaunch 方法则会清空当前的堆栈。

跳转携带参数

使用url拼接方式

wx.navigateTo({
  url: '/pages/b/b?id=' + 1 + "&tu=" + 'a.jpg'
  });

参数解析

var that = this;
  that.setData({                             //this.setData的方法用于把传递过来的id转化成小程序模板语言
 b_id: options.id,     //id是a页面传递过来的名称,a_id是保存在本页面的全局变量   {
   
   {b_id}}方法使用
  b_tu: options.tu,
  })

十七、小程序模块化

module.exports.request = request

module.exports = {

postlist:postData,

}

这两种方式是使得数据或方法得以输出。

之后在其他文件中引用时,如var postData =  require('../../data/post-data.js') ;

之后通过postData.postlist即可获取到postData。

猜你喜欢

转载自blog.csdn.net/Kongou/article/details/89645638
今日推荐