微信小程序开发（持续更新）

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

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 的位置

微信小程序开发（持续更新）

1.项目基本配置

（1）文件

1）主体文件

2）页面文件

（2）渲染模式

（3）新建页面方式

（4）配置文件

1）JSON

2）window 字段

3）tabBar 字段

4）页面配置

5）项目配置文件

6）集成Sass语言

7）sitemap.json文件

2.样式与组件

（1）尺寸单位rpx

（2）全局样式和局部样式

（3）组件案例

1）view

2）轮播图

3）image

4）text

5）navigation

6）scroll-view

7）背景图的使用

3.事件绑定与事件对象

（1）事件绑定

（2）事件分类及阻止事件冒泡

（3）事件传参

1）data传参

2）mark传参

4.wxml语法

（1）声明和绑定数据

（2）setDate（）修改数据

（3）双向数据绑定

（4）列表渲染

（5）条件渲染

5.生命周期

（1）运行机制

（2）更新机制

（3）生命周期

1）应用生命周期

2）页面生命周期

6.小程序api

（1）api介绍

（2）网络请求

（3）界面交互loading提示框

（4）界面交互模态提示框

（5）本地存储

（6）路由与通信

（7）页面处理函数-上拉加载

7.自定义组件

（1）组件创建

（2）数据和方法

（3）Properties属性

8.npm支持

（1）npm包使用

（2）自定义构建npm