小程序学习

已于 2022-07-08 10:52:31 修改
阅读量290 收藏
点赞数
文章标签： 小程序 微信小程序
于 2022-07-04 16:28:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sam80000/article/details/125206612
版权

小程序

一、小程序和网页区别

在这里插入图片描述

二、微信小程序注册和使用

1.获取appid

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在真机上查看项目。
在这里插入图片描述

2.工具使用

添加编译模式

在这里插入图片描述
修改每次编译启动的页面
在这里插入图片描述

真机调试

在这里插入图片描述

清除缓存

修改变量没有生效
在这里插入图片描述

详情页面

在这里插入图片描述

上传代码

点击上传按钮，会先提交到开发版本中，再审核，再发布线上版本
在这里插入图片描述

3.代码目录

  • pages 各个页面
  • utils：功能代码
  • eslintrc ：eslint检查配置文件
  • app.js ： 入口文件
  • app.json ：当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等
  • app.wxss ： 相当于css样式
  • project.config.json : 整个项目的配置文件。体现在详情中，给ide开发工具用的
  • project.private.config.json ： 项目私人配置，不会读取出来
  • sitemap.json ：类似于seo ，可以在搜索时用到

在这里插入图片描述

页面目录

小程序官方建议：页面都放在pages中 ，每个页面以单独的文件夹存在
在这里插入图片描述

app.json

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
window下的配置
在这里插入图片描述

stiemapLocation：指定sitemap.json文件，此文件用于加载微信搜索
在这里插入图片描述

project.config.json

开发工具配置文件
在这里插入图片描述

sitemap.json

用来配置小程序及其页面是否允许被微信索引，就是是否可以搜索到。默认的配置是允许所有页面被索引。
在这里插入图片描述
在这里插入图片描述

4.创建项目

1.先创建home文件夹，在文件夹内创建 page，自动生成4个文件。app.json-pages自动添加页面。
2.在pages中添加文件目录，会自动创建文件夹。
在这里插入图片描述
在这里插入图片描述

pages中设置首页

两个方法

  1. 在 pages 中，谁在第一个，谁就是首页
  2. 在app.json 添加新的节点 entryPagePath 添加文件目录
    在这里插入图片描述
    在这里插入图片描述

5.发布版本

在这里插入图片描述
在这里插入图片描述
审核是微信官方审核，一般是3-7天

三、基础语法和原理

1.语法区别

标签语法

在这里插入图片描述

样式语法

新增rpx 自适应
在这里插入图片描述

js语法

在这里插入图片描述

2.宿主环境

在这里插入图片描述

通信主体

在这里插入图片描述

工作方式

在这里插入图片描述

运行机制

在这里插入图片描述

3.npm

在这里插入图片描述

4.支持vant库

在这里插入图片描述

需要先初始化库

初始化项目，获取package.json 等文件，对一些包进行管理。在通过命令安装vant库

npm init -y

使用组件库

构建npm后，再app.json 配置组件库
在这里插入图片描述

四、组件语法

1.视图容器

view

在这里插入图片描述在这里插入图片描述

scroll-view

scroll-view 需要设置高度，滚动条会按默认宽度，如需显示在整个容器中，需要设置宽度

在这里插入图片描述
在这里插入图片描述在这里插入图片描述

swiper和swiper-item

在这里插入图片描述
swiper默认高度150px
在这里插入图片描述

写法和常用属性
在这里插入图片描述

2.基础内容

text

显示文本内容，类似span
user-select ：用户可以长按复制
在这里插入图片描述

rich-text

富文本内容，通过node节点可以写html的代码

3.表单组件

button

type：三种类型
size：按钮大小，只有默认和mini。mini会把按钮变成行内元素
loading：会显示加载的样式，并且不能点击
disable:是否禁用
plain：镂空效果

在这里插入图片描述

4.媒体组件

image

默认宽320高240，src输入地址，mode调整图片
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

5.导航

navigator-声明式导航

在这里插入图片描述
在这里插入图片描述
不写opentype属性，默认跳转普通页面
在这里插入图片描述

声明式导航传参和编程式导航传参

只适合在普通页面传参
在这里插入图片描述
声明式普通页面传参
在这里插入图片描述

编程式导航传参
在这里插入图片描述

接收参数：会把传的参数封装在onLoad的options中。
在这里插入图片描述
接收并设置
在这里插入图片描述

后退导航-声明式

在这里插入图片描述

delta数字，表示返回几层
在这里插入图片描述

编程式导航

通过代码方法跳转tabbar页面
在这里插入图片描述
通过代码跳转到普通页面
在这里插入图片描述

在这里插入图片描述

不同的跳转方法不同
在这里插入图片描述

后退导航-编程式

在这里插入图片描述
在这里插入图片描述

6.自定义组件

创建组件文件

在这里插入图片描述

使用自定义组件

在全局或局部页面使用

在页面使用，页面的json文件中有usingComponents{}。写入自定义的组件名，可以与导入的组件名称不一样，最好名字一致。配置组件路径。

在这里插入图片描述

全局使用自定义组件。在app.json 文件中,使用方法与页面相同
在这里插入图片描述

全局页面和局部页面使用场景

在这里插入图片描述

组件和页面的区别

看json 文件，组件需要添加component:true的属性。
看js入口方法，组件是component,页面是page

在这里插入图片描述

组件的数据、方法、属性

页面的方法和生命函数同级，组件的方法写在method中
在这里插入图片描述

定义属性
properties用来接受外部传入的值
在这里插入图片描述

data和properties的区别
data适用于存储组件私有数据
properties适用于存储外界传给组件的数据
在这里插入图片描述

数据监听器

数据监听器用于监听和响应属性或数据字段的变化，从而执行特定的操作。
在组件中用observers属性
小程序 数据监听器只有在组件中有，页面中没有，需要自己写
vue2的数据监听器是watcher，原理是object.defineproperty
vue3的监听原理是proxy
在这里插入图片描述

监听数据
可以监听多个数据变化，也可以监听单个数据变化
在这里插入图片描述

监听对象
在这里插入图片描述
监听单个或多个属性
在这里插入图片描述
监听所有属性
在这里插入图片描述

7.组件生命周期

在这里插入图片描述

重要函数

在这里插入图片描述
生命周期函数写在lifetimes中
在这里插入图片描述
组件moved函数，需要数据复用，应该配上id，才能确定数据移动
组件error函数，抛出异常，组件onerror函数也会捕获异常，所以组件也可以不写，避免重复捕获异常

组件在页面的生命周期

在这里插入图片描述
在这里插入图片描述

8.组件插槽

组件定义好插槽，在页面中使用组件和插槽显示内容。根据插槽指定的位置，页面插入的内容显示在指定位置
单个插槽直接写slot在对应的位置

多个插槽

启动多个插槽，需要在options的multipleSlots开启true
在组件中slot加上name属性，在页面引用的时候加上slot和指定的插槽name
在这里插入图片描述

9.父子组件通信

1.属性绑定2.事件绑定3，获取组件实例
在这里插入图片描述

1.属性绑定

父到子传值用属性绑定
用于父组件向子组件的指定属性设置数据，仅能设置JsoN兼容的数据（只能传递数据，不能传递方法）

单项数据流

由父到子再传到孙，一层一层传递，不能跨级

2.事件绑定

子到父传值用事件绑定，可以传递 任意数据，包括数组和方法

事件绑定4个核心
在这里插入图片描述

  1. 在父组件js中定义一个自定义函数，传递给子组件
    在这里插入图片描述

  2. 在父组件wxml，通过bind:自定义名称="父组件自定义函数"给子组件绑定函数
    在这里插入图片描述

  3. 在子组件wxml 绑定一个函数调用父组件函数
    在这里插入图片描述

  4. 在子组件js中用this.triggerEvent("父组件自定义名称",{参数数据})给父组件传值
    在这里插入图片描述

  5. 父组件通过e.detail获取传递过来的值
    在这里插入图片描述

3.获取组件实例

在父组件使用this.selectComponent("id或class选择器")，获取子组件的实例对象。
使用场景：在父组件中获取子组件数据
如何获取：
在父组件wxml中，使用子组件，给子组件配置id选择器或class选择器。
在父组件js中，使用this.selectComponent("id或class选择器")获取整个子组件实例，从而得到子组件的数据。

在这里插入图片描述

五、WXML语法

1.数据绑定

和vue绑定一样，在page中的data中设置数据
在这里插入图片描述
在这里插入图片描述
取出各个类型的数据
在这里插入图片描述

2.事件绑定

在这里插入图片描述
在这里插入图片描述

自定义事件写在page中，和data平级
在这里插入图片描述
在这里插入图片描述

触发事件函数，会接收event对象
在这里插入图片描述
在这里插入图片描述

事件冒泡 target是当前点击的按钮。currenttarget是事件绑定的组件
在这里插入图片描述

3.修改data中的数据

通过调用this.setDate({})，传入一个对象。把改的数据写入
在这里插入图片描述

4.事件函数传参

传参：通过自定义属性data-属性名,会把数据传到 event对象下的target的dataset里。通过对应的属性名获取到传入参数。event.target.dataset

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

5.表单传参

input传参

绑定函数，在event.detail中可以查看value值。对应输入的值
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

6.if条件渲染

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
hidden 属性 dom会渲染出来，但是不会显示
在这里插入图片描述

7.for列表渲染

在这里插入图片描述

在这里插入图片描述

1 使用数组中某个属性
在这里插入图片描述

在这里插入图片描述

2 使用 item 本身 需要用*this
在这里插入图片描述

在这里插入图片描述

六、WXSS

1.wxss

在这里插入图片描述

2.rpx 小程序自适应屏幕

在这里插入图片描述

3.@import 样式导入

在这里插入图片描述

4.app.wxss

全局样式和局部样式
在app.wxss中写样式，全局都能使用且不用导入。
局部样式如果与全局样式名字相同，局部样式有的会覆盖全局样式，局部样式没有的会继续使用全局样式。
在这里插入图片描述

5.全局配置和页面配置样式

在app.json文件中
app.json 中的部分配置，也支持对单个页面进行配置，可以在页面对应的 .json 文件来对本页面的表现进行配置。

页面中配置项在当前页面会覆盖 app.json 中相同的配置项（样式相关的配置项属于 app.json 中的 window 属性，但这里不需要额外指定 window 字段）

七、WXS

1.wxs

应用场景：作为过滤器对数据处理，渲染到页面上，源数据不变。
不支持es6及以上的语法

每个 wxs 模块均有一个内置的 module 对象。
在这里插入图片描述
在这里插入图片描述

2.遵循commonjs模块化规范

引用和转载 模块化知识连接

在这里插入图片描述

3.内嵌wxs

在wxml中写
在这里插入图片描述
在这里插入图片描述

4.外联wxs

定义wxs文件，用<wxs src=''>导入
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

5.注意事项

在这里插入图片描述

八、全局配置

1.tabBar

tabBar配置在app.json下
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

2.全局下拉刷新

在app.json 页面中配置
在这里插入图片描述
在这里插入图片描述
下拉刷新样式
在这里插入图片描述

配置下拉刷新

一般不在全局中配置，最好是哪个页面使用用哪个页面配置
backgroundtextstyle是下拉三个点的颜色
在这里插入图片描述

api实现下拉刷新

使用wx.startPullDownRefresh(),注意使用此api 需要现在本页面json文件中开启下拉刷新。下拉有的不会弹回去，需要api停止
在这里插入图片描述

下拉刷新监听用户下拉动作

用户下拉后可以触发此函数
在这里插入图片描述
一般在此函数中处理下拉后的操作
在这里插入图片描述

3.上拉触底

在页面js中设置，通过onReachBottom函数监听上拉触底操作
在这里插入图片描述
在这里插入图片描述

最好在全局配置文件中设置到底距离，页面json文件也可以设置。数值类型是数字。默认是50
在这里插入图片描述

九、API

1.数据请求

请求的域名需要在小程序管理后台先配置合法域名网址
在这里插入图片描述
在这里插入图片描述

跳过request域名验证

临时开启不校验域名
在这里插入图片描述
在这里插入图片描述

跨域和ajax和发起网络请求

在这里插入图片描述

2.wx.request

get和post请求，一般在onload 页面生命周期中
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.小程序API promise化

什么需要promise化
如何把一个异步请求 promise化：

  1. 写一个function 函数
  2. 在函数中 new 一个promise 对象，并返回
  3. promise对象中写一个回调函数(resolve,reject)=>{}
  4. 在回调函数中写你的异步请求，成功的结果用resolve返回，失败的结果用reject返回
  5. 在需要调用的函数中，通过调用function函数.then(res) 获取对应的成功返回的信息

在这里插入图片描述
在函数中使用promise对象，处理成功和错误
在这里插入图片描述
或者用catch捕获异常
在这里插入图片描述

第二种使用promise对象的方法:使用 async/await 处理 promise对象

  1. 写一个function 函数
  2. 在函数中 new 一个promise 对象，并返回
  3. promise对象中写一个回调函数(resolve,reject)=>{}
  4. 在回调函数中写你的异步请求，成功的结果用resolve返回，失败的结果用reject返回
  5. 对需要调用promise对象的函数外层 添加 async
  6. 创建一个对象接收 promise对象返回的信息，并写上await
    在这里插入图片描述
    使用try catch 捕获异常
    在这里插入图片描述

4. wx.createInnerAudioContext 音频

本来想用组件audio，结果停止维护了，只好使用wx.createInnerAudioContext代替。
在这里插入图片描述
这是一个对象，需要创建实例
在这里插入图片描述

//创建实例对象
const innerAudioContext = wx.createInnerAudioContext()
//是否自动播放
innerAudioContext.autoplay = true
//播放音频地址
innerAudioContext.src =“”

在这里插入图片描述

十、生命周期

在这里插入图片描述

1.小程序生命周期

在这里插入图片描述
整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 实例，获取 App 上的数据或调用开发者注册在 App 上的函数。
在这里插入图片描述

2.页面生命周期

tabbar页面不回收，没有onunload 函数执行，普通页面有
在这里插入图片描述

sam80000
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
最简单且强大的微信小程序全局请求、响应、异常拦截实现
q145p152的博客
11-19 1580
因为我们是往一个函数注入静态属性，对象调用链会直接寻找最后一个属性baseURL，js默认你已经创建好了Request.defaults对象，实际压根没有，defaults都没有，那baseURL肯定也没有，所以直接报错baseURL未定义，注册拦截器也必须老老实实的层层结构写，这也是我们代码中用那么多try的原因，如果不用try去兜一下代码，就将变成你必须注册拦截器和baseURL，不注册就报错，try了之后你可以随心所欲，想拦截全局异常就拦截异常。复制粘贴就能用，小白也能懂，当然我也是小白。
全局异常捕获并返回前端报错和堆栈信息
我的博客
07-13 2194
全局异常捕获并返回前端报错和堆栈信息，再也不用担心找不到报错的代码位置了！
AOP方式捕获和处理微信小程序前端全局异常
milugloomy的博客
09-18 3331
原因 这几天，公司开发的小程序有部分用户用户打开咨询列表页显示空白，我们查后台日志没有错误。最让人头疼的是，这种前端显示不正确，只是在某些机型上才出现，我们的测试人员无法复现该问题。无法复现，又没有错误日志记录，这种问题咋解决？ 方案1 思前想后，我们需要将小程序端所有的错误日志记录下来，并上传给后台。因为小程序的特性，除了App.js，所有其他的逻辑都在Page函数中，我们只需要处理Pag...
JavaScript高级应用：例外处理
aboutblog的专栏
09-20 964
程序开发中，编程人员经常要面对的是如何编写代码来响应错误事件的发生，即例外处理（exception handlers）。如果例外处理代码设计得周全，那么最终呈现给用户的就将是一个友好的界面。否则，就会让访问者对莫名的现象感到真正的“意外”。本文就将为你介绍Web开发中JavaScript语言的例外处理技术。　　一、什么是例外处理　　当JavaScript程序在运行中发生了诸如数组索引越界、
小程序异常捕获处理
子燕若水的博客
07-12 638
无
我的小程序学习笔记整理
01-12
我的小程序学习笔记整理
微信小程序学习心得1.docx
06-12
微信小程序学习心得1.docx微信小程序学习心得1.docx微信小程序学习心得1.docx微信小程序学习心得1.docx微信小程序学习心得1.docx微信小程序学习心得1.docx微信小程序学习心得1.docx微信小程序学习心得1.docx
微信小程序学习源码
01-27
学习微信小程序框架和代码语法，了解小程序配置和发布方法。
小程序学习资料
11-13
小程序开发资料，内容详尽，可以拿来开发小程序。
微信小程序 异常处理(Expected updated data but get first rendering data;)
范宏的博客
04-12 1万+
webviewScriptErrorExpected updated data but get first rendering data;Expected updated data but get first rendering dataError: Expected updated data but get first rendering data    at _ (http://127.0.0...
小程序全局异常捕获
SeriousSnow的博客
01-19 1922
首先啊。这玩意其实是我网上查的一份代码简单改了改。。你说转载吧 好像也不太对。。就标了原创。。 其实就是重写了Page函数，初始化的时候会遍历全部属性，找出全部函数，重写全部函数外面套一层try catch。。就那么回事 获取到错误堆栈然后让后端给你个接口上报日志就哦了。。就这样吧 Page = function(obj) { for (let key in obj) { let oldFunction = obj[key] // consol
微信小程序云开发教程-JavaScript入门（4）-捕捉异常
软件工程小施同学 的专栏
07-20 771
现在我们来学习一种相对高级的bug调试方法 Js有一个特点，如果一行即将执行的代码出错，则该行代码以下的所有代码都不会再执行了。 所谓的异常，就是bug。 左边是正常没有bug的代码，我们把原来的c=a+b中的b删除了，得到右边存在bug的代码，因为+是双目运算符，必须存在右边的数，所以，这行代码就有问题。 执行右边的代码，运行到sum=myFunction(1,2)时，系统就会报错，并且不会执行之后的cons...
微信小程序常见错误及基本排除方法
热门推荐
u012421719的博客
12-20 4万+
也接触了不少人解决问题的过程里，有一些比较难以排查的可能性列举在这，方便大家看一下： 也欢迎大家把自己常用的排除方法列举在这，一起互相学习探讨！ 1：ES6；使用es6可能导致安卓端真机调试时很多问题出现，还有其他未知问题；原因未知； 2：字母拼错，包括字母拼写错误，大小写没有注意；微信小程序中，有大量这样的代码示例，从中间冒出一个大写，比如支付中的appId
小程序异常监控及错误处理
weixin_30702413的博客
07-13 2434
小程序异常监控收集 web端与小程序错误监控差异 在 Web 端监测的是页面完整的 url，而小程序端监测的是路由地址； 小程序页面属于app内部的页面，使用时已全部加载完毕，因此监控页面性能时不统计页面加载时长等信息，更多的是对页面内请求、资源请求和用户行为的监控； 由于微信官方和小程序代码的要求，集成方式对比 Web 端会相对严格一些。 小程序需要监控的数据 JavaScript异常监控...
微信小程序开发系列（六）——“处理请求时出错”怎么处理？
u012329294的专栏
01-09 2488
在小程序开发中，有时候会出现wx.request接口调用完成后，总是出现“处理请求时出错”这个问题， 然而看了下后台代码没有问题啊？ 那到底是什么原因引起的这个问题呢。 最后发现是查询数据库时，中间的字段书写错误造成，定位了很久啊！  ！！！ 如下：C#后台  DataTable dt = JSnackLib.dbop.Instance().ExecuteQueryDataTable(s
微信小程序发现的一些小问题以及解决方案集合以及注意点
草灯的专栏
12-07 3万+
      最近一直在关注小程序开发，目前正在试着将公司的app转换为小程序执行，在此期间有遇到的一些小问题以及解决办法集合。当然这些都是我个人经验谈，对于小程序的底层框架我也是一知半解，很多也都无法解释的很清楚，如果有不同见解欢迎指出。      1、navigator组件使用flex布局在安卓机子下是不兼容的。      解决方案：在navigator组件内先添加一个view组件使用flex布...
微信小程序的 request 处理方式，及微信小程序 request 的错误处理
Hellogen
07-24 2万+
微信小程序是一种借助互联网获取内容的应用，而非单机应用，对互联网通信的依赖很深。因此，微信小程序在开发过程中最重要的一环就是处理前后台通信。 在基本应用中，常常会遇到，请求失败，或者操作数错误的情况；请求失败多数情况下是前后台通信不畅造成的，例如，不稳定的蜂窝数据环境下或者较为拥堵的宽带网络下，通常，一个前端 request 方法应该具备会处理这些问题能力。 不稳定网络环境造成的通信失败 - ...
微信小程序捕获async/await函数异常实践
weixin_30807779的博客
09-03 694
背景 我们的小程序项目的构建是与web项目保持一致的，完全使用webpack的生态来构建，没有使用小程序自带的构建功能，那么就需要我们配置代码转换的babel插件如Promise、Proxy等；另外，项目中涉及到异步的功能我们统一使用async/await来处理。我们知道，小程序的onError 生命周期只能捕获同步错误，而完全不采用小程序自带构建工具的情况下，开发模式下遇到的问题： ...
微信小程序学习需要哪些
最新发布
03-29
基础知识？ 1. HTML、CSS、JavaScript：微信小程序使用的是类似于 Web 开发的技术，因此需要掌握这些基本的 Web 开发技术。 2. 小程序开发工具：微信小程序开发需要使用微信官方提供的开发工具，需要熟悉该工具的使用方法。 3. 小程序基础架构：了解小程序的基础架构，包括小程序的生命周期、页面、组件等，能够实现简单的小程序页面开发。 4. API 接口：熟悉微信小程序提供的 API 接口，能够调用微信提供的接口实现小程序的功能。 5. 服务端知识：微信小程序和服务端的交互需要掌握一定的服务端技术，包括 HTTP 协议、数据交互等。 6. 设计知识：小程序需要进行 UI 设计，需要了解设计原则和设计工具，能够实现简单的小程序设计。 7. 用户体验：小程序需要关注用户体验，需要了解用户行为和用户体验设计原则，能够实现良好的用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值