微信小程序开发（持续更新）
1.项目基本配置
（1）文件
1）主体文件
主体文件：够作用于整个小程序，影响到小程序的每个页面，主体文件必须放到项目的根目录下
由三部分组成：
- .appjs:小程序入口文件
- .app.json:小程序的全局配置文件
- .app.wxss:小程序的全局样式
2）页面文件
页面文件：是每个页面所需的文件，小程序页面文件都存放在 pages 目录下，一个页面一个文件夹
通常由四个文件组成，每个文件只对当前页面有效：
- .js:页面逻辑
- .wxml:页面结构
- .wxss:页面样式
- ..json:小页面配置
（2）渲染模式
在app.json中去掉render、rendererOptions、componentFramework，改变渲染模式
（3）新建页面方式
①在pages文件夹添加页面文件夹，再添加对应名称page
②在app.json中的pages直接添加
（4）配置文件
1）JSON
在小程序中，JSON扮演配置项角色
- app.json:小程序全局配置文件，用于配置小程序的一些全局属性和页面路由
- 页面.json:小程序页面配置文件，也称局部配置文件，用于配置当前页面的窗口样式、页面标题
- project.confg.json:小程序项目的配置文件，用于保存项目的一些配置信息和开发者的个人设置
- sitemap.json:配置小程序及其页面是否允许被微信索引，提高小程序在搜索引擎搜索到的概率
2）window 字段
用于设置小程序的状态栏、导航条、标题、窗口背景色。
"window": {
"navigationBarTitleText": "微信小程序" ,
"navigationBarBackgroundColor": "#f3514f",
"enablePullDownRefresh": true,
"backgroundColor": "#efefef",
"backgroundTextStyle":"light"
},
3）tabBar 字段
定义小程序顶部、底部 tab 栏，用以实现页面之间的快速切换。
"tabBar": {
"selectedColor": "#f3514f",
"color": "#666",
"backgroundColor": "#efefef",
"borderStyle":"white",
"list": [
{
"text": "首页",
"pagePath": "pages/index/index",
"iconPath": "/assets/tabbar/index.png",
"selectedIconPath": "/assets/tabbar/index-active.png"
},
{
"text": "分类",
"pagePath": "pages/cate/cate",
"iconPath": "/assets/tabbar/cate.png",
"selectedIconPath": "/assets/tabbar/cate-active.png"
},
{
"text": "购物车",
"pagePath": "pages/cart/cart",
"iconPath": "/assets/tabbar/cart.png",
"selectedIconPath": "/assets/tabbar/cart-active.png"
},
{
"text": "我的",
"pagePath": "pages/profile/profile",
"iconPath": "/assets/tabbar/profile.png",
"selectedIconPath": "/assets/tabbar/profile-active.png"
}
]
},
4）页面配置
也称局部配置，每一个小程序页面也可以使用自己的.json 文件来对本页面的窗口表现进行配置
5）项目配置文件
project.config.json:项目配置文件，常用来进行配置公共的配置
project.private.config.json:项目私有的配置，常用来配置个人的配置
6）集成Sass语言
在project.config.json中的setting添加配置
"useCompilerPlugins":[
"sass"
],
将.wxss文件改为.scss文件即可添加样式
7）sitemap.json文件
- 没有 sitemap.json 则默认所有页面都能被索引
- ("action": "allow","page":"*“}是优先级最低的默认规则，未显式指明"disalow" 的都默认被索引
"rules": [{
"action": "allow",
"page": "pages/index/index"
}]
2.样式与组件
（1）尺寸单位rpx
小程序规定任何手机型号屏幕宽度都是750rpx
（2）全局样式和局部样式
全局样式：指在 app.wxss 中定义的样式规则，作用于每一个页面，例如:设置字号、背景色、宽高等全局样式
局部样式：指在 page.wxss 中定义的样式规则，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。
（3）组件案例
1）view
小程序的盒子，相当于div
2）轮播图
在小程序中，提供了 swiper和 swiper-item 组件实现轮播图
swiper:滑块视图容器，其中只能放置 swiper-item 组件
swiper样式
autoplay - 自动播放
interval - 播放时间
indicator-dots - 添加选中小点
indicator-color - 小点的颜色
indicator-active-color - 小点选中颜色
circular - 顺序播放
<!-- 轮播图区域 -->
<view class="swiper">
<swiper
autoplay
interval="1500"
indicator-dots
indicator-color="#fff"
indicator-active-color="#f3514f"
circular
><swiper-item><image src="../../assets/banner/banner-1.png" mode="" show-menu-by-longpress/></swiper-item><swiper-item><image src="../../assets/banner/banner-2.png" mode="" show-menu-by-longpress/></swiper-item><swiper-item><image src="../../assets/banner/banner-3.png" mode="" show-menu-by-longpress/></swiper-item>
</swiper>
</view>.swiper{swiper{height: 360rpx;swiper-item{image{width: 100%;height: 100%;}}}
}3）image
- src 属性:图片资源地址
- mode:图片裁剪、缩放的模式
- show.menu.by.longpress:长按图片显示菜单
- lazy-load:图片懒加载
4）text
- user-select:文本是否可选，用于长按选择文本
- space:显示连续空格
- text只能嵌套text
5）navigation
1.ur：当前小程序内的跳转链接
2.open-type:跳转方式
- navigate：保留当前页面，跳转到应用内的某个页面。但是不能跳到tabbar
- redirect：关闭当前页面，跳转到应用内的某个页面。但不能跳转到tabbar页面
- switchTab：跳转到tabBar页面，并关闭其他所有非labBar页面
- reLaunch:关闭所有页面，打开到应用内的某个页面
- navigaleBack:关闭当前页面，返回上一页面或多级页面
6）scroll-view
两个属性:
- scroll-x:允许横向滚动
- scroll-y:允许纵向滚动
7）背景图的使用
background-image
小程序背景图不能使用本地路径，需要用网络图片替换本地路径
3.事件绑定与事件对象
（1）事件绑定
bindtap="事件名"
（2）事件分类及阻止事件冒泡
冒泡事件：当一个组件的事件被触发后，该事件会向父节点传递
非冒泡事件：当一个组件的事件被触发后，该事件不会向父节点传递
使用bind会触发事件冒泡，想阻止可以使用catch
（3）事件传参
1）data传参
在组件上 通过 data-"的方式 定义需要传递的数据，其中*是自定义的属：
例如：<view data-id=“100"bindtap="handler”'/
currentTarget事件绑定者
target事件触发者
2）mark传参
在组件上使用 mark:自定义属性 的方式将数据传递给事件处理函数，例如:<view mark:id=“100"bindtap="handler”/>
4.wxml语法
1.声明和绑定数据
再Page（）方法的data对象进行声明定义
应用时采用{{}}方式
2.setDate（）修改数据
this.setData({age:this.data.age+1})添加数据：
const userinfo = {...this.data.userinfo,name:'yld',age:18}const userinfo = Object.assign(this.data.userinfo,{name:'yld'},{age:18})删除数据：
delete this.data.userInfo.agethis.setDate({userinfo:this.data.inInfo
)}3.双向数据绑定
在属性前添加model即可