小程序开发设计流程 第1篇
小程序刚刚推出时,是不支持组建化的,版本后开始支持
组件化思想的应用 :
需要在 json 文件中进行自定义组件声明
将component 字段设为 true 可这一组文件设为自定义组件
在页面的json文件中,配置usingComponents,即可在页面中使用
在的usingComponents声明某个组件,那么所有页面和组件可以直接使用该组件
组件内的class样式 : 只对组件wxml内的节点生效, 对于引用组件的Page页面不生效
ps : 组件内不能使用id选择器、属性选择器、标签选择器 => 因为会作用到外面,不安全
外部使用class的样式 : 只对外部wxml的class生效,对组件内是不生效的ps :
外部使用了id选择器、属性选择器不会对组件内产生影响 外部使用了标签选择器,会对组件内产生影响
在Component对象中,可以传入一个options属性
其中options属性中有一个styleIsolation(隔离)属性
styleIsolation有三个取值 :
可以使用 properties 属性
说实话,有点繁琐,咕噜咕噜~
可在父组件里调用 ,获取子组件的实例对象
调用时需要传入一个匹配选择器 selector,如:(_.my-component_)
ps : 如果有多个,可以使用
小程序的插槽不支持默认值
小程序的插槽不支持默认值 => 可以用css的empty伪类 + 兄弟选择器来解决
behaviors 是用于组件间代码共享的特性,类似于一些编程语言中的 “mixins”
组件的生命周期,指的是组件自身的一些函数,这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发
ps : 最重要的生命周期是 created attached detached
组件的的生命周期也可以在 lifetimes 字段内进行声明(这是推荐的方式,其优先级最高)
一些特殊的生命周期,它们并非与组件有很强的关联,但有时组件需要获知,以便组件内部处理
组件所在页面的生命周期 => 在 pageLifetimes 定义段中定义
小程序开发设计流程 第2篇
git操作都是大同小异,详细的可以看我之前写的git文章
小程序开发设计流程 第3篇
小程序的核心技术主要是三个:
Vue的MVVM和小程序MVVM对比
MVVM :
小程序开发设计流程 第4篇
Text组件 : 用于显示文本, 类似于span标签, 是行内元素
Button组件用于创建按钮,默认块级元素
open-type用户获取一些特殊性的权限,可以绑定一些特殊的事件
View视图组件 : 块级元素,独占一行,通常用作容器组件,和div差不多
scroll-view : 可以实现局部滚动
注 : 若要开启flex布局,须加上enable-flex这个属性
Image组件 : 用于显示图片
Swiper组件 => 用来做轮播图效果
model:value => 双向绑定功能
小程序开发设计流程 第5篇
跳转到 tabBar 页面
并关闭其他所有非 tabBar 页面,使用 navigateBack 无法退回
保留当前页面,跳转到应用内的某个页面
但是不能跳到 tabbar 页面
(Object object) => 关闭当前页面,返回上一页面或多级页面
在界面跳转过程中需要相互传递一些数据
使用URL中的query字段
在详情页内部拿到首页的页面对象,直接修改数据
在小程序基础库 开始支持events参数,也可以用于数据的传递
使用URL中的query字段进行传递,定义events对象
使用eventChanner,传递数据到上一个页面
navigator组件主要就是用于界面的跳转的,也可以跳转到其他小程序中
小程序开发设计流程 第6篇
页面样式的三种写法:行内样式、页面样式、全局样式
优先级依次是:行内样式 > 页面样式 > 全局样式
权重
rpx(responsive pixel): 可以根据屏幕宽度进行自适应,规定屏幕宽为750rpx
在iphone6上,屏幕宽度为375px,共有750个物理像素,1px === 2rpx
iphone6为标准,设计稿是375,1px === 2rpx => 设计稿16px,我们写32rpx
iphone6为标准,设计稿是750,1px === 1rpx => 设计稿20px,我们写20rpx
wx:if --- wx:elif --- wx:else
hidden属性:
hidden和wx:if的区别
hidden => 控制隐藏和显示是控制是否添加hidden属性,相当于display:none
wx:if => 是控制组件是否渲染的
block : 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性
index : 遍历后在wxml中可以使用一个变量index,保存的是当前遍历数据的下标值
item : 数组中对应某项的数据
wx:for-item = ' ' => item 重命名
wx:for-index = ' ' => index 重命名
使用wx:for时,可以添加一个key来提供性能
wx:key 的值以两种形式提供 :
WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构
为什么要设计WXS语言
WXS使用的限制和特点 :
WXS有两种写法 :写在标签中 || 写在以.wxs结尾的文件中
WXS标签的属性 :
wxs :
['对象.属性']: 修改的值