原生小程序

jsx66
207 阅读15分钟

01-基础信息AppID

开发文档：enjoy-plus.botue.com/wechat/basi…

网址：mp.weixin.qq.com

以163.com注册的邮箱

获取AppID：wxbd8ddab35fa95d97

APPSecret小程序秘钥：d9f6e7c873281c6cddf0e8adcd96618b

day01-0612

02-配置文件

设置---首先项目

pages 用来存放小程序的页面，是固定的

index 只针对于index页面

utils 工具文件

03-写一个页面

01-写伪元素实现下面的斜杠

伪元素是行内元素，通过css的样式去显示一个元素。行内元素宽高不生效，所以有两种方式

  1. 转成块级元素 display：block margin：auto均分两侧
  2. 通过定位，子绝父相 水平居中 transform: translateX(-50%);
  3. 注意点：伪元素应该设置背景颜色而不是color

02-图片适配

项目的根组件新建static文件夹

图片标签用image表示 src表示图片路径

rpx根据屏幕大小进行适配处理

03-使用小盒子

pxcook设置rpx为单位，通过alt进行方法缩小，设置原型图为2倍图

通过设计稿原型知道宽高，左右间距不相等用auto！

04-使用轮播图

developers.weixin.qq.com/miniprogram…

使上课的案例居中的方法

05-bindtap或者bind:tap方法

第一种 bindtap

第二种：bind:tap

index.js里面定义某方法

小程序Page里面可以直接写方法：Page({xxx})

获取data里面的值 this.data.xxxx

修改data里面的值 this.setDate({key:value,key:value,key:value})

06-案例-小程序的加减

小程序必须通过setDate去更新数据，使用num++或者num--就相当于对数据直接进行修改了。

样式：宽和高 、背景颜色、 边框 、水平居中、文字水平居中

注意单位是rpx！！！！

04-小程序配置.json 双引号！

01-pages

在右下角查看文件路径

首页通过navigator进行跳转，URL为地址

在任意界面新建page ,会自动创建4个文件

app.json进行pages的配置 是一个数组

02-window

developers.weixin.qq.com/miniprogram…

#2490fc 蓝色

03-tabbar底部导航栏

其他配置 十六进制的颜色

04-页面的单独配置index.json

05-字体图标

小程序中使用字体图标与网页中的应用字体图标一致，小程序样式.wxss文件中不能使用本地路径，只能使用网络路径http https base64！！！！

通过变换后面的类名显示不同的内容！！！！

注意:

全局配置 tabBar 中的图片只能使用本地路径不支持网络路径，切记切记！！！

使用网络路径直接右键另存为~保存为.wxss的格式。

通过class=“iconfont icon-qq” 去引入字体图标

day02-0613

01-添加编译模式

编译是 重新启动、打包项目

刷新是 刷新当前页面

热重载 是自动局部更新

02-model:value=“{{}}”双向绑定

data中的数据，都会用到插值表达式，常看AppData控制台

03-问题-小程序的开发/上线流程

01-说说小程序开发流程

02-小程序是如何上线的？

04-列表循环wx:for="{{data}}"

wx:for="{{变量}}" wx:key="*this" wx:for-item="student" wx:for-index="idx"

除了data中的数据要用到插值表达式，其他的属性可以直接写。

上述代码中 wx:key 属性的值要求必须具有唯一性，使用时分成两种情形：

  • 数组单元为简单类型数据时，使用 *****this ****指定为 wx:key 的值
  • 数组单元是对象类型时，只要写对象的属性名。name age gender等等

字符串转化为布尔值为true！！！

数组里面是字符串，key直接用*this

数组里面是对象数组，key用属性值即可

.stu_container {
  display: flex;
  justify-content: space-evenly;
  padding: 10rpx;
  border: 1px solid #000;
}
.stu_container:first-child {
  font-weight: bold; /* 加粗第一行文本 */
}
.stu_container text {
  flex-basis: 25%; /*确定每列平分宽度*/
  text-align: center;
}
.student {
  margin-top: 20rpx; /* 添加一定的上边距 */
}
.role {
  display: inline-block;
  padding: 10rpx;
  background-color: #bbffcc;
  margin-right: 50rpx;
  font-size: 20px;
  font-weight: bold;
}

05-自定义访问单元值item和索引值index

开发中 wx:for 的嵌套是比较常见的，外层 wx:for 和内层的 wx:for 都使用 index 和 item 来访问数组的索引和单元，会使得代码的易读性比较差，这种情况下通过 wx:for-index 和 wx:for-item 来分别指定如何访问数组的索引值和单元值。

06-wx:if条件判断

wx:if 和 wx:for不建议一起写，性能不好。所以使用block表示空标签，用来分块。

07-hidden和wx:if

08-生命周期

我们都知道生命周期是一组名称固定且会自动被调用执行的函数，在开发小程序时也有专门的的生命周期函数，分为应用级别、页面级别和组件级别3种类型，我们先学习应用级别和页面级别的生命周期

01-应用级别

onLaunch on浪吃 onShow onHide 害的

注意点：

场景值：

只有在初始化和切前台可以获取到场景值--onLaunch和onShow

02-页面级别

on害的unload

最主要的是onLoad和onShow！！！

onLoad加载一次初始化加载 onShow展示很多次，一些增删改查请求放在里面

获取地址参数

onLoad里面获取传过来的参数

小程序下面可以看见传过来的参数

09-内置API

小程序 API 是小程序内置提供的一系列的方法，通过这些方法能够实现许多的功能，比如网络请求、本地存储、微信支付、拍照、扫码等，这些 API 通过全局对象 wx 进行调用。

第一种方法：

第二种方法：

解决request----bug

小程序规定 wx.request 调用接口的服务器地址（域名）必须事先在小程序的管理后台进行设置，否则是不允许发起网络请求，如何解决这个问题呢？有两种方式：

  • 在小程序管理后台进行设置
  • 在小程序开发工具中进行设置

管理后台设置步骤见下图：

注意:

域名有个严格的要求：必须是 https 协议且已备案！

day02-总结

wx-if

wx-hidden

都可以控制盒子的显示和隐藏动态创建显示和隐藏，v-show

应用级别

onLaunch onShow onHide 切后台

页面级别

wx.request 发送请求，后期会进行封装，需要变成箭头函数，否则会有问题。

day03-0615

01-界面交互

01-加载提示showLoading

加载提示框常配合网络请求来使用，用于增加用户体验，对应的 API 有两个，分别为：

  • wx.showLoading 显示加载提示框
  • wx.hideLoading 隐藏加载提示框

mask不加就会穿透,所以mask：true 防止触摸穿透

developers.weixin.qq.com/miniprogram…

在调用 wx.showLoading 时可以传入以下参数：

  • title 指定显示的文字提示内容（不能省略）
  • mask 提供一个透明层阻止对页面其它内容进行操作
  • success 显示加载提示框成功后的回调（很少用到）
  • fail 显示加载提示框失败后的回调（很少用到）
  • complete 显示加载提示框完成后的回调（包括成功和失败两种情况）

02-信息反馈

信息反馈是指根据用户的某些操作来告知操作的结果，如用户点击加入购物车，提示用户添加成功，用户提交表单提示用户表单验证的结果等，对应的 API 是 ****wx.showToast

03-本地存储

小程序中也能够像网页一样支持本地存储数据，用于在本地存一些临时性的数据，比如包含的用户登录状态 token 等，其包含以下 4个主要的 API：

  • wx.setStorageSync 在本地存入一个数据
  • wx.getStorageSync 读取本地的一个数据
  • wx.removeStorageSync 删除本地存储的一个数据
  • wx.clearStorageSync 清空本地存储的数据

数据量比较大，可以使用异步，同步会阻塞程序执行。

注意是data 不是value

同步存储本地数据和异步存储：

同步简单，但是会影响性能【常用】，异步写法麻烦，但是性能更优

快捷输入 写入方法!!!!!

04-miniProject npm

小程序不能直接使用在 npm 下载的模块包，必须经过小程序开发者工具进行构建后才可以使用，这一节我们来学习支持 npm 模块包的步骤：

  1. 安装一个 npm 模块包，以 miniprogram-computed 为例
# 创建 package.json
npm init -y

# 安装一个模块
npm install miniprogram-computed

这一步操作是与以往的 npm 模块安装没有任何的区别，会将模块安装到 node_modules 当中，但是下载的模块无法直接导入到小程序中，如下图所示：

const computedBehavior = require('miniprogram-computed').behavior
 behaviors: [computedBehavior], 和data同级

require导入，和data同级别

05-自定义构建

最后一个放在外面会有警告！！！

第一步新建miniprogram 拖进需要的文件夹，第二步注释上一步构建的代码，底部报错

第三步：setting同级别添加miniprogramRoot 现在页面就有了【自定义小程序的根目录】

setting里面设置

  • packNpmManually 启用 npm 构建手动配置
  • packNpmRelationList 手动构建 npm 配置详情

调整完成后都需要构建npm！

06-自定义组件

创建组件

新建文件夹components 新建文件夹authorization 第三步：新增component组件

注册组件

第一步：新建page页面

第二步：注册 demo.json wxml 使用组件

把它放在最前面

authorization组件里面写

全局注册 app.json

数据与属性

组件的内部index.js

在调试器里面 点wxml

data 自己的数据 properties父组件传过来 使用组件传过来的，不是自己的

自定义组件的事件

07-生命周期

lifetimes定义生命周期 里面有created、attached 钩子函数

检测用户是否登录

判断当前本地中是否有token

转成布尔类型 双重否定等于肯定

小程序可以修改【props】外面传过来的数据 的值

调用方法拿到布尔值，进行设置

08-插槽

在组件内部使用slot 进行占位 挖个坑

接着在使用组件的地方 使用写需要传入的内容【导入 注册 使用】

写多个插槽

第一步：支持多插槽 options

第二步：组件内部给插槽起名字

第三步：使用组件标签内 slot='xxxx' 指定放到那个插槽内

09-vant组件

第一步 快速上手步骤

vant-contrib.gitee.io/vant-weapp/…

第二步：全局注册json

第三步：打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。

第四步：在组件中使用

day04-0616

01-基本配置

新建项目：vant-contrib.gitee.io/vant-weapp/…

第一步：新建miniprogram文件夹 拖进xx文件

指定根目录

第二步：配置project.config.json文件的， 根目录root，显示优化后的目录 ，这个是在最下面， 和setting 、appid同级别

第三步：yarn init -y 初始化

第四步：导入vant 组件库 yarn add @vant/weapp --production

第五步： 修改app.json 删除style:v2

第六步： 修改project.config.json 优化了目录所以手动打包npm以及它的详情

第七步：工具---构建npm 就会生成 miniprogram_npm文件夹

第八步：修改app.json数组的排列顺序或者添加编译模式

第九步：新建vant文件夹---新建page文件index

第十步：app.json可以引入组件

app.json全局注册组件 usingComponents:{}

第十一步：vant组件 index.wxml里面

02-插槽的用法

个人理解：默认插槽就不写，其他插槽就写 slot="xxx"

03-swipeCell滑动单元格

app.json中全局引入vant组件

右边插槽实现左滑删除 反馈组件 SwipeCell

清除缓存 重新编译

优化删除样式

通过控制台小手去找到组件

自定义类名

根节点样式类---自定义类

通过important强行修改！

控制台找样式非常不方便

建议每次都要去编译一下

样式覆盖

  1. 简单粗暴，通过调试工具查找要修改样式的盒子，找到已定义的类名，然后强制覆盖原有的样式
  2. 通过外部样式类

Vant 大部分组件都支持 custom-class 来指定一个类名，通过这个类名来修改组件根节点的样式，以 van-cell-group 为例：

  1. 使用样式变量

新版本的 css 支持定义变量，其语法样式为: --变量名: 值，定义的变量通过 var 关键字来使用：

记住是分号！！！

css也有作用域的概念

在box 下面，css变量拥有作用域的概念

box定义的变量，可以在他自身及后代元素中使用

没有就使用默认值,逗号分隔开

css变量可以支持传默认值，可以写在page全局里面使用

总结：

vant组件-样式覆盖

页面配置修改样式

还可以调整这一块的文字大小，鼠标一摸，40rpx

size="large" 不能去掉哦~

修改类名的方法

  1. 直接类型，加权重
  2. 看组件是否暴露类名
  3. 新版本的css变量

04-分包

使用分包

分包加载有点类似 Vue 中的按需加载的功能，将小程序拆分成若干个部分叫做分包，在分包的基础上能够实现自动加载当前所需部分小程序代码，在一定程序能够提升小程序的加载速度，同时也能解决小程序代码包大小不能超过 2M 的限制。

root：代码的根目录 目录的名字

pages ：两个页面 分页的路径

app.json 文件通过 subPackages 配置要加载的分包：自动去添加

不会首次加载就执行~

主包：首次加载的包

除了他们以外都是主包，分包某些场景下才会加载对应分包的代码，tabbar的页面只能放在主包当中以及分包也有数量的限制。

整个小程序所有分包大小不超过 20M。

单个分包/主包大小不能超过 2M

分包预下载

提前加载

是和分包是同级别的！

参考抖音：分包预加载技术可以提前去下载 分包的代码，分包页面的访问速度才会提升

打开调试器观察

访问哪个页面去预下载一个分包。

表示预加载成功~

05-框架接口

01-getApp

实现数据和方法的共享：

getApp()获取小程序实例

02-getCurrentPages

demo/index.js

获取数组getCurrentPages()

06-内置API

头像昵称填写

开发文档：open-type

手动编译模式

第一步：复制样式和结构

第二步：1.必须得是Button按钮，2. 添加属性open-type, 获取头像 chooseAvatar

3.获取用户回调bind:chooseavatar ="xxx"

编译没有效果，不显示具体的内容，版本太低了2.21.2

查看右侧

控制台有报错请忽略掉~

更新头像

上面可以监听，ev返回一个对象

获取头像

获取用户昵称必须用到 input 组件，当 input 获得焦点后小程序会自动展示用户的昵称

以下是 input 的使用细节：

  • 设置 input 的 type 属性值为 nickname
  • 监听 input 组件的 input 、blur 、change 等事件获取表单中的值

bind:change 第一次是用了对象的方法

看appdata控制台是否有更新

以上两种是有坑的，上传了头像昵称就没了，有了昵称头像就没了。

如果只更新对象中的属性，引号包裹~就会解决上面的报错。更新对象中的属性

07-内置API路由

新建router 文件夹,里面三个文件夹

demo 、detail、index 三个文件夹

手动编译：路由测试 pages/router/index/index

open-type navigate redirect

跳转的路径 open-type="" navigate/ redirect

code......

首页 详情页 demo页

使用场景：已经登录了，没有必要返回登录页了

tabbar跳转 switchTab

app.json配置tabbar 有tab快捷键~此时在首页点击去跳转到详情页没有反应了，因为此时的详情页升华了，不再是它啦！不能普通跳转，用switchTab

app.json 指定跳转类型

open-type="switchTab"

js跳转

developers.weixin.qq.com/miniprogram…

exit离开小程序

reLaunch 全部清空，只有最后一条

困死 记得看视频

总结

主要是思想

  1. vant组件
  2. cell单元格引入 注册 使用
  3. 样式：简单暴力 看文档是否暴露雷属性 新版css变量进行覆盖
  4. 分包加载：重点 第一：提高首次打开的速度，第二点不能超过2M的限制
  5. 分包预下载 ：提前加载 不影响用户体验
  6. 框架接口---getApp获取小程序的实例 token 属性和方法
  7. 框架接口---getCurrentPages获取对应的页面栈 、上一个路径
  8. Behavior---mixin混入---【还没了解】
  9. 内置API--获取头像Button
  10. 内置API--获取昵称input type=nickname 保证版本库大于2.21.1
  11. 路由--单纯的页面跳转 navigate redirect switchTab。。。
avatar
文章
阅读
粉丝