微信小程序开发

小程序基础

小程序 VS App

注册微信小程序账号

项目成员和体验成员

小程序开发者id

创建小程序项目

文件和目录结构

基础库

小程序调试

配置文件

介绍

全局配置-pages配置

注意事项：

全局配置-window配置

全局配置-tabbar配置

"tabBar": { "selectedColor": "#f3514f", "color": "#666", "borderStyle": "black", "position": "bottom", "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" } ] },

页面配置

项目配置文件和配置Sass

sitemap.json文件

样式

小程序的样式和组件介绍

尺寸单位 rpx

全局样式和局部样式

组件

组件案例演示-划分页面结构

轮播图区域绘制

<!-- 轮播图区域 --> <view class="swiper"> <swiper autoplay circular indicator-dots interval="2000" indicator-color="#f3514f" indicator-active-color="#fff" > <swiper-item> 1 </swiper-item> <swiper-item> 2 </swiper-item> <swiper-item> 3 </swiper-item> </swiper> </view>

// 轮播图区域样式 .swiper{ swiper{ height: 360rpx; background-color: skyblue; swiper-item{ // & 在 Sass 中代表的是父选择器，引用的意思 // swiper-item:first-child &:first-child{ background-color: lightsalmon; } &:last-child{ background-color: lightseagreen; } } } }

轮播图图片添加

小程序中渲染图片需要用image组件 常用属性如下：

绘制公司信息区域

小程序中渲染文本时需要使用text组件，常用属性如下：

商品导航区域

点击商品导航跳转到商品列表

微信小程序中 需要跳转时使用navigation组件 常用属性如下：

url在进行页面跳转时 需要在路径前面加 / 斜线 否则跳转不成功

delta：返回的层级默认是1，如果想返回几级就写几

推荐商品区域

微信小程序中，想要实现内容滚动使用scroll-view组件

属性如下：

e.g.

<scroll-view class="scroll-x" scroll-x> <view>1</view> <view>2</view> <view>3</view> </scroll-view> <scroll-view class="scroll-y" scroll-y> <view>1</view> <view>2</view> <view>3</view> </scroll-view>

.scroll-x{ width: 100%; white-space: nowrap; background-color: skyblue; view{ display: inline-block; width: 300rpx; height: 80rpx; &:first-child{ background-color: lightgreen; } &:last-child{ background-color: lightcoral; } } } .scroll-y{ height: 400rpx; background-color: skyblue; margin-top: 10rpx; view{ height: 400rpx; &:first-child{ background-color: lightgreen; } &:last-child{ background-color: lightcoral; } } }

字体图标的使用

背景图片的使用

事件系统

事件绑定和事件对象

事件分类和阻止事件冒泡

事件传参-data-*自定义数据

<view bindtap="parentHandler" />
事件传参-mark 自定义数据
<view bindtap="parentHandler" mark:parentid="1" mark:parentname="tom"> <!-- 如果需要使用 mark 进行事件传参 需要使用 mark: 自定义属性的方式来进行参数传递 --> <!-- <button bindtap="btnHandler" mark:id="1" mark:name="tom">按钮</button> --> <button mark:id="1" mark:name="tom">按钮</button> </view>
Page({ // 按钮绑定的事件处理函数 btnHandler(event){ console.log(event.mark.id); console.log(event.mark.name); }, parentHandler(event){ // 先点击蓝色区域 （不点击按钮） // 通过事件对象获取的是 view 身上绑定的数据 // 先点击按钮（不点击蓝色区域） // 通过事件对象获取到的是 触发事件的节点 以及 父节点身上所有的mark 数据 console.log(event); } })
wxml语法
声明和绑定数据
<!-- 如果需要展示数据，在 wxml 中需要使用双大括号写法将变量进行包裹 --> <view>{{school}}</view> <view>{{obj.name}}</view> <!-- 绑定属性值 如果需要动态绑定一个变量 属性值也需要使用双大括号进行包裹 --> <view id="{{id}}">绑定属性值</view> <!-- 如果属性值是布尔值也需要用双大括号包裹 --> <checkbox checked="{{ isChecked}}"/> <!-- 算数运算 --> <view>{{ id + 1 }}</view> <view>{{ id - 1 }}</view> <!-- 三元运算 --> <view>{{ id === 1 ? '等于':'不等于'}}</view> <!-- 逻辑判断 --> <view>{{id === 1}}</view> <!-- 在双大括号写法内部 只能写表达式 不能写语句 不能调用 js 的方法 --> <!-- <view>{{if (id === 1){}}}</view> --> <!-- <view>{{for (const i = 0;i < 10; i++) {}}}</view> --> <view>{{obj.name.toUpperCase()}}</view>
// index.js Page({ // 在小程序页面中所需要使用的数据均来自于 data 对象 data:{ id:1, isChecked:false, school:'尚硅谷', obj:{ name:'tom' } } })
setData() 修改数据
<!--pages/cate/cate.wxml--> <view>{{ num }}</view> <button bindtap="updataNum">更新 num</button>
// pages/cate/cate.js Page({ data:{ num:1 }, // 更新num updataNum(){ // 更新数据 // console.log(this.data.num); // 通过赋值的方式直接修改数据 但是不能修改页面上的数据 // this.data.num += 1 // console.log(this.data.num) // this.setData 两个作用 // 1.更新数据 // 驱动视图（页面）更新 this.setData({ // key:是需要更新的数据 // value：是最新的值 num:this.data.num + 1 }) } })
setData修改对象类型数据
新增
删除
setData修改数组类型数据
新增
方式二
修改
删除
方式一
方式二
简易双向数据绑定
列表渲染-基本使用
列表渲染-进阶用法
用法二：
条件渲染
生命周期
小程序运行机制
小程序更新机制
小程序生命周期介绍
应用生命周期
页面生命周期
生命周期两个细节
小程序API
介绍
发起网络请求