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 - 顺序播放
html
<!-- 轮播图区域 -->
<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>
css
.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()修改数据
javascript
this.setData({
age:this.data.age+1
})
添加数据:
javascript
const userinfo = {
...this.data.userinfo,
name:'yld',
age:18
}
const userinfo = Object.assign(this.data.userinfo,{name:'yld'},{age:18})
删除数据:
javascript
delete this.data.userInfo.age
this.setDate({
userinfo:this.data.inInfo
)}
(3)双向数据绑定
在属性前添加model即可
(4)列表渲染
在组件上使用 wx:for 属性绑定一个数组或对象,既可使用每一项数据重复渲染当前组件
每一项的变量名默认为 item,下标变量名默认为 index
在使用 wx:for 进行遍历的时候,建议加上 wx:key 属性, wx:key 的值以两种形式提供:
- 字符串:代表需要遍历的 aray 中 tem 的某个属性,该属性的值需要是列表中唯一的字符串或数字,且不能动态改变
- 保留关键字 *this 代表在 for 循环中的 item 本身,当 item 本身是一个唯一的字符串或者数字时可以使用
html
<view wx:for="{{numlist}}" wx:key="id">{{item}}-{{index}}</view>
<view wx:for="{{obj}}" wx:key="index">{{item}}-{{index}}</view>
使用 wx:for-item 可以指定数组当前元素的变量名
使用 wx:for-index 可以指定数组当前下标的变量名
(5)条件渲染
在微信小程序中实现条件染有两种方式:
- 使用 wx:i1、wx:eli1、wx:else 属性组
- 使用 hidden 属性
wx:if和 hidden 二者的区别:
- wx:if :当条件为 true 时将结构展示出来,否则结构不会进行展示,通过 移除/新增节点的方式来实现
- hidden :当条件为 true时会将结构隐藏,否则结构会展示出来,通过 display 样式属性来实现的
5.生命周期
(1)运行机制
- 冷启动:如果用户首次打开,或小程序销毁后被用户再次打开,此时小程序需要重新加载启动
- 热启动:如果用户已经打开过某小程序,然后在一定时间内再次打开该小程序,此时小程序并未被销毁,只是从后台状态进入前台状态
- 挂起:小程序进入「后台」状态一段时间后(5秒),微信停止小程序 JS 线程执行,小程序进入「挂起」状态当开发者使用了后台播放音乐、后台地理位置等能力时,小程序可以在后台持续运行,不会进入到挂起状态
- 销毁:如果用户很久没有使用小程序,或者系统资源紧张,小程序会被销毁,即完全终止运行当小程序进入后台并被「挂起」后,如果很长时间(目前是 30分钟)都未再次进入前台,小程序会被销毁当小程序占用系统资源过高,可能会被系统销毁或被微信客户端主动回收。
(2)更新机制
- 启动时同步更新:微信运行时,会定期检査最近使用的小程序是否有更新。如果有更新,下次小程序启动时会同步进行更新,更新到最新版本后再打开小程序,如果用户长时间未使用小程序时,会强制同步检查版本更新
- 启动时异步更新:在启动前没有发现更新,小程序每次 冷启动 时,都会异步检査是否有更新版本。如果发现有新版本,将会异步下鲅新版本的代码包,将新版本的小程序在下一次冷启动进行使用,当前访问使用的依然是本地的旧版本代码
(3)生命周期
一个小程序完整生命周期由应用生命周期、页面生命周期和组件生命周期三部分组成
1)应用生命周期
定义在app.js文件的App()方法中定义
由onLaunch、onShow、onHide三个函数组成
2)页面生命周期
在页面Page()方法进行定义
由onLoad、onShow、onReady、onUnload、onHide五个函数组成
- tabBar 页面之间相互切换,页面不会被销毁
- 点击左上角,返回上一个页面,会销毁当前页面
6.小程序api
(1)api介绍
小程序提供API几乎挂载wx下,如wx.request()、wx.setStorage()等
- 异步API:接受一个obj类型参数
- 同步API:约定以Sync结尾
- 事件监听API:约定以on开头
(2)网络请求
wx.request 请求的域名必须在微信公众平台进行配置
如果使用 wx.request 请求未配置的域名,在控制台会有相应的报错
①在微信公众号号平台配置好域名
②发送请求
javascript
wx.request({
url: 'https://gmall-prod.atguigu.cn/mall-api/index/findBanner',
method:'GET',
data:{},
header:{},
success:(res)=>{
console.log(res)
},
fail:(err)=>{
console.log(err)
},
complete:(res)=>{
console.log(res)
}
})
跳过域名的校验的开发:
- 在真机上,需要点击胶囊区域的分析按钮,在弹框中选择 开发调试,重启小程序后即可
- 在微信开发者工具中,点击详情按钮,切换到本地详情,将不校验合法域名、web-view(业务域名)、TLS版本以及HTTPS证书 勾选上
(3)界面交互loading提示框
loading 提示框常配合网络请求来使用,用于增加用户体验,对应的API有两个:
- wx.showLoading()显示loading 提示框
- wx.hideLoading()关闭 loading 提示框
(4)界面交互模态提示框
wx.showModal():模态对话框,常用于询问用户是否执行一些操作例如:询问用户是否退出登录、是否删除该商品 等
wx.showToast():消息提示框,根据用户的某些操作来告知操作的结果例如:退出成功给用户提示,提示删除成功等
javascript
async delHander(){
const {confirm} = await wx.showModal({
title: '提示',
content: '是否删除该商品?',
})
if(confirm){
wx.showToast({
title: '删除成功',
icon:'none',
duration:2000,
})
}else{
wx.showToast({
title: '取消删除',
icon:'error',
duration:2000,
})
}
}
(5)本地存储
(6)路由与通信
在小程序中实现页面的跳转,有两种方式:
- 声明式导航:navigator 组件
2.编程式号航:使用小程序提供的 API
- wx.navigat0To():保留当前更面,跳转到应用内的某个页面,但是不能跳到tabbar页面
- wx.redrecTo():关闭当前页面,跳转到应用内的某个页面。但是不允许转到tabbar 页面、
- wx.swiichTab():跳转到labBar页面,路径后不带参数
- wx:reLaunch():关闭所有页面,打开到应用内的某个页面
- wx.navigateBack():关闭当前页面,返回上一页面或多级灭面
(7)页面处理函数-上拉加载
- 在 app.json 或者 page,json 中配置距离页面底部距离:onReachBottomDistance;默认 50px
- 在 页面.js 中定义 onReachBottom 事件监听用户上拉加载
7.自定义组件
(1)组件创建
- 公共组件:将页面内的功能模块抽取成自定义组件,以便在不同的页面中重复使用
- 页面组件:将复杂的页面拆分成多个低耦合的模块,有助于代码维护
全局注册:在 app.json 文件中配置 usingComponents 进行注册,注册后可以在任意页面使用
局部注册:在页面的json 文件中配置 usingComponents进行注册,注册后只能在当前页面使用
(2)数据和方法
在组件js的Component方法中data定义数据,methods定义组件
(3)Properties属性
Properties 是指组件的对外属性,主要用来接收组件使用者传递给组件内部的数据,和 data 一同用于组件的模板渲染
label接受文本,position接受位置
8.npm支持
(1)npm包使用
npm init -y
npm i @vant/weapp
工具->构建npm
(2)自定义构建npm
在project.config.json中指定node_modules的位置和目标miniprogram_npm的位置
- 配置 project.config.json 的 miniprogramRoot 指定小程序源码的目录
- 配置 project.config.json 的 seting.packNpmManualy 为true,开启自定义 node_modules和 miniprogram_npm 位置的构建 npm 方式
- 配置 project.config.json 的 setting:packNpmRelationList项,指定 packageJsonPath 和miniprogramNpmDistDir 的位置