0
点赞
收藏
分享

微信扫一扫

微信小程序开发学习日志

文件夹:

pages:

index:首页

logs:日志

json配置文件:

app.json:

app.json为全局配置,包括了所有页面路径(pages)窗口外观(window)界面表现(style)底部tab等。

#页面配置会覆盖全局配置

project.config.json:

"setting" : 本地设置 "es6": JS编译成ES5是否开启 "postcss": 上传代码时样式自动补全是否开启

sitemap.json:

"action": 是否允许被索引(disallow为都不允许)

新建小程序页面:

修改项目首页:

#小程序会把排在第一的页面当作项目首页进行渲染

WXML:

小程序框架设计的一套标签语言,用于构建页面结构

  • #div,view:布局
  • #span,text:文本
  • #img,image:图像
  • #a,navigator:导航跳转

WXSS:

一套样式语言,用于描述WXML的组件样式,美化页面结构

JS逻辑交互:

处理用户的操作。例如响应用户点击,获取用户位置等等。

通信的主体:

小程序的通信主体为渲染层逻辑层

通信模型:

小程序启动过程:

页面渲染过程:

组件:

组件由宿主环境提供,开发者可基于组件快速搭建出漂亮的页面结构。 常见组件分类

1.视图类组件:

view:

scroll-view:

例:

#滚动条实现

swiper和swiper-item:

例:

#轮播图实现(类似广告条幅) #每一个可轮播的内容为swiper-item组件实现

view组件基础布局:

  1. #定义大容器结构
  2. #定义文本样式
  3. #添加背景颜色
  4. #定义布局

scroll-view滚动效果:

swiper和swiper-item轮播图:

#有几张轮播图就需添加几个swiper-item项

nth-child()后面需要加空格!

swiper组件常用属性:

text和rich-text:

#新版本selecttable已经被废弃了,新增useselect属性,但仍可使用

button和image:

#style设置可以控制按钮样式

#可用src属性指定渲染的具体图片

按比例缩放:

API:

数据绑定:

mustache(插值表达式):

将data中的数据绑定到页面中渲染,使用mustache语法(双大括号)将变量包起来即可 #info和msgList均为变量名

语法格式:

<view>{{要绑定的数据名称}}<view>

#PageP需要大写!

动态绑定内容:

动态绑定属性:

三元运算:

算数运算:

事件:

回调触发

target和currentTarget区别:

bindtap语法格式:

#console.log(e)为接收的数据显示在调试器中

this.setData(dataObject)方法:

this.函数.参数代表旧值

事件传参:

bindinput的语法格式:

条件渲染:

wx:if和wx:elif以及wx:eles判断:

#两个等号是数值相等,三个等号是全等,条件不一样

结合< block >:

例:

hidden控制元素显隐:

#配置hidden属性时,不能使用block标签;而且,无论条件成立与否都会被渲染


举报

相关推荐

0 条评论