微信小程序开发1

一、结构

1.项目结构

页面结构

2.语言结构

WXML与HTML区别 :

WXSS与CSS区别 :

.Js文件的分类

3.小程序的通信模型

①他是由渲染层与逻辑层

根据微信客户端进行转发

②逻辑层与服务区

根据微信客户端进行转发

图示:

4.小程序运行机制

运行机制又分为,小程序的启动过程, 与小程序的页面渲染过程

1.小程序的启动过程

①首先将小程序的代码包下载到本地
②解析app.json的全局配置文件
③调用app.js小程序入口文件, 执行App()函数来创建小程序的实例
④渲染小程序首页
⑤启动完成

2.小程序的渲染过程

①加载页面的.json配置文件
②加载页面的.wxml文件与.wxss样式
③执行页面的.js文件, 调用Page()来创建页面实例
④渲染完成

二、组件

小程组件也是宿主环境提供, 官方把组件分为九大类
视图容器, 基本组件, 表单组件, 导航组件, 媒体组件, map地图组件, canvas画布组建, 开放能力,
无障碍访问

视图容器组件 :

1.view

view标签就像div标签, 是一个块标签, 经常用它来布局

2.scroll-view

他是滚动视图组件, 经常应用到电商的左侧的筛选框

		  A
		  B
		  C

通过拖拉图,可以实现滑动效果

scoll-view属性:

scroll-y 开启横向的滚动
scroll-x 开启纵向的滚动

注意!!

如果是纵向滚动要给scroll-view 设置一个高度
如果是纵横向滚动要给scroll-view 设置一个宽度
3.swiper,swiper-item
这两个标签用来实现轮播图的效果

3.swiper,swiper-item

轮播图通过这两个标签来实现

wxml:

  
    A
  
  
    B
  
  
    C
  

wxss:

.swiper {
  height: 150px;
}

.item {
  height: 100%;
  line-height: 150px;
  text-align: center;
}

swiper-item:nth-child(1) .item {
  background-color: seashell;
}

swiper-item:nth-child(2) .item {
  background-color: skyblue;
}

swiper-item:nth-child(3) .item {
  background-color: springgreen;
}

swiper属性:

indicator-dots 这是显示下方的小圆点
indicator-color=“white” 显示未激活的小圆点颜色
indicator-active-color=“gray” 显示已激活的小圆点颜色
autopaly 实现自动切换轮播图 默认是5每秒切换
interval=“1000” 自定义1000毫秒切换一次轮播图
circular 这是开启轮播图的衔接, 也就是最后一张衔接第一张

4.text与rich-text

这是文本标签
text就是普通文本标签, rich-text是可以表吸html的ui效果

  手机号:
  111111111

rich-text 属性:

nodes=“

rich-text标签

">
这就是渲染出html的ui效果

注意:

nodes="

rich-text标签

">,由于外边已经使用了双引号, 所以style里面就得用单引号, 防止混淆