微信小程序学习_id=”app“ css-优快云博客

app.js：入口，写全局逻辑
- APP的生命周期
- 在App生命周期中，onLaunch、onShow两个生命周期中，给一个参数，可以获取到场景值
app.json：页面注册、项目的tabBar、网络请求、window等等的配置...

传送门：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html(opens new window)

注意点:

1.这里面不能有注释,写了注释会报错

2.创建新的页面直接在这里面添加,不需要在文件路径上右键新建,添加之后会自动生成该名称文件夹下的的四个文件

3.想要看到哪个页面,pages中的文件路径要放在第一个
app.wxss：全局样式

#page

xxx.js【必须】：逻辑、提供模型数据，接受事件处理
- data与方法同级，不需要写methods
- 获取data中的变量：this.setData,这种写法才能双向数据绑定,注意需要与视图进行交互的数据才使用this.setData(),不需要交互的直接使用 this.data.属性名
- 页面结构中使用data中的数据要加双大括号,使用方法不用加,直接使用方法名
xxx.json：页面配置，只能覆盖全局配置中的window这个选项，传送门：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html(opens new window)
xxx.wxml【必须】：页面内容，里面写它提供的组件或是自定义组件，不要写div、span
- block 没什么作用，只是用来包裹代码块的
- for循环中 we:for="{{data中的变量}}" wx:key="直接写变量名,不需要写item.变量名" , wx:for-item="名称" 表示给item另起了一个名字,默认不写就是item和index
xxx.wxss：页面样式，私有

#index页面分析

静态页面展示
里面涉及到的内容（组件、插值表达式、条件渲染、...）

#页面生命周期&页面栈

页面的声明周期钩子参考

Page(Object object) | 微信开放文档

栈的结构：先进后出，后进先出，处在栈里面的页面都不会销毁，除非它出栈了，才会销毁。

小程序中页面都是由栈来维护的
凡是在栈里面的都活着,出栈的都挂了
我们看到的页面都是位于栈顶
每个tabBar的选项都是一个独立的页面栈
wx.navigateTo 这个api就是入栈

注意:

当点击跳转到另一个页面的时候,页面还在栈中存在,没有销毁,只是隐藏了,所以当重新回到这个页面时,上一个页面只会执行onShow,跳转到的页面会执行 onLoad / onShow / onReady

当点击左上角返回按钮时,页面就是销毁了,在栈中就不存在了,会执行onUnload

事件处理

传送门：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html(opens new window)

在小程序中，事件绑定有两种写法，一种是 bindxxx，xxx代表事件类型,，另一种是 catchxxx，xxx代表事件类型
- 两种事件绑定写法的不同 : bind事件绑定会有事件冒泡,catch事件绑定会阻止事件冒泡
传参：跟vue不一样，不能通过直接括号后面接值,在原生语法中它只能通过自定义属性传参 data-xxx="值"

wxss & css 的对比

传送门：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html(opens new window)

主要两大方面不太一样：

样式导入
- @import "路径"
rpx：以后去公司做项目的时候，就是拿着设计稿上的 px * 2 即可

项目创建步骤

在桌面下创建一个空白文件夹,命名之后,里面什么都不要
打开小程序开发者工具,点击左上角或+号进行创建

导入文件夹/修改名称/输入ID/勾选不使用云服务

4.进入项目删除不需要的文件夹

5.创建文件夹,直接在App.json中输入即可,会自动创建

6.创建tabBar,与pages同级

7.修改顶部样式

网络请求封装

对wx.request原生api进行封装，把它封装成Promise形式的代码

步骤

在项目根目录下创建一个utils文件夹，里面创建一个request.js文件
在request.js中写上封装的代码

使用分包

目的

把非tabBar页面和非启动页面放在分包中，在使用到的时候去加载，这样可以减少主包的大小，同时提高小程序启动的速度

打包原则

声明 subpackages 后，将按 subpackages 配置路径进行打包，subpackages 配置路径外的目录将被打包到 app（主包）中
app（主包）也可以有自己的 pages（即最外层的 pages 字段）
subpackage 的根目录不能是另外一个 subpackage 内的子目录
tabBar 页面必须在 app（主包）内

步骤

在项目根目录创建一个subpkg文件夹，里面专门用来存放分包相关的页面
在subpkg目录下，创建phone-login文件夹

3.在app.json中进行分包的配置

4.点击手机号登录后跳转到分包地址

自定义组件

需求:创建一个公用的搜索框

#自定义组件跟页面的区别

js：页面的js是Page({})函数，组件的js是Component({})函数
json：页面的json中有usingComponents配置项，组件的json中除了有usingComponents配置项，还要写上"component": true
生命周期：页面的生命周期 (opens new window)和组件的生命周期 (opens new window)函数不一样

创建自定义组件

1.在根目录下创建一个components文件夹

2.在components下创建组件

3.点击search-bar 右键新建component,会自动生成四个对应的文件

4.在component/search-bar/search-bar.wxml中书写结构代码与在component/search-bar/search-bar.wxss中书写样式代码

使用自定义组件

1.在需要使用的页面的json文件中注册自定义组件

2.将注册好的组件名,在页面结构中当标签使用

自定义组件向父组件传参

1.自定义组件结构中绑定事件

2.在自定义组件的js文件中书写逻辑代码,并将方法传递给父组件

注意: 1. 在自定义组件中,事件逻辑处理代码要写在methods中

2.this.triggerEvent('方法名'),是向父组件传参,类似于vue中的this.$emit()

3.父组件接收方法

注意: 要用bind进行绑定

4.自定义组件调用父组件中的方法,实现页面跳转

1.先在分包中创建一个搜索页面,并在app.json里面添加分包

2.在点击搜索条时,跳转到搜索页面

Vant-Weapp的使用

vant-weapp

轻量、可靠的小程序 UI 组件库。传送门(opens new window)

使用步骤

传送门(opens new window)

把终端切换到小程序项目根目录，执行npm init -y生成package.json文件
安装依赖包 npm i @vant/weapp -S --production
打开微信开发者工具，先勾选 使用 npm 模块 选项,再点击 工具 -> 构建 npm，构建完成后，即可引入组件

4.构建完成之后，在项目根目录下会生成一个文件miniprogram_npm，里面就有刚刚构建好的vant-weapp的组件

5.在app.json（全局注册）或是页面的 json（局部注册）文件中，注册vant-weapp中相关的组件

1.app.json

2.页面的注册，例如search页面注册

在页面或是组件的wxml中使用vant-weapp相关的组件即可

搜索页面

注册vant-weapp组件

在search.json中注册vant的van-search子组件

当标签使用，并进行搜索框的处理

1、传入默认文本

2、控制右侧取消按钮的显示与隐藏

3、当输入框聚焦时取消按钮隐藏

4、取消搜索时取消按钮隐藏

5、确定搜索时请求接口获取事件

逻辑代码处理

uniapp

#介绍

uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

传送门

原理

优势

使用Vue语法

文档全

生态丰富、有应用市场

支持多个编辑器开发(HBuilder、VScode)

#其它开发小程序框架

wepy (opens new window)：腾讯自研的小程序开发框架，采用类Vue的语法，暂时只支持编译成微信小程序
mpvue (opens new window)：美团-点评团队自研的小程序开发框架，使用Vue开发，支持编译成各平台小程序
uniapp (opens new window)：数字天堂自研的前端应用的框架，使用Vue开发，支持编译成各平台小程序
taro (opens new window)：京东自研的前端应用的框架，使用React开发，支持编译成各平台小程序

注意：

因为uni-ni中使用到了scss，所以需要安装 sass 和 sass-loader，但是sass-loader 请使用低于 @11.0.0 的版本，sass-loader@11.0.0 不支持 vue@2.6.12(opens new window)
uni-ui相关组件可以使用easycom (opens new window)组件模式去加载，把他们放在src/components目录下即可