微信小程序--基础知识

已于 2023-04-12 09:09:09 修改
阅读量47 收藏
点赞数
分类专栏： uni-app 文章标签： 微信小程序 微信 前端
于 2023-04-01 17:04:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47743942/article/details/129881496
版权

微信小程序从基础到发布全流程

 
 
参考文档b站黑马视频–黑马优购小程序开发

 
 

1.小程序简介

  1. 运行环境不同

运行在微信环境中

  1. API不同

无法调用BOM和DOM
可以调用微信各种API：地理定位、扫码、支付

  1. 开发模式不同

申请小程序开发账号
安装小程序开发者工具
创建和配置小程序项目

 

2.第一个小程序

注册微信小程序账号
安装稳定版小程序开发者工具

在这里插入图片描述

接下来选择不使用云代理，使用javascript语言开发

在这里插入图片描述
 

3.基本结构

在这里插入图片描述
 

在这里插入图片描述
 

在这里插入图片描述
 

在这里插入图片描述
 

在这里插入图片描述
 

4.页面及环境

  1. WXML

在这里插入图片描述

  1. WXSS
    在这里插入图片描述
  2. JS
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

小程序宿主环境包含的内容：

通信模型
运行机制
组件
API

  • 通信模型
    在这里插入图片描述

  • 运行机制

    • 启动过程
      在这里插入图片描述

    • 渲染过程
      在这里插入图片描述

  • 组件
    在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

  • API
    在这里插入图片描述

 

5.数据绑定、渲染、样式

数据绑定

  • 在data中定义数据
  • 在WXML中使用数据（Mustache语法）

常用事件

在这里插入图片描述

事件处理

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

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

在这里插入图片描述

条件渲染

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

列表渲染

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

WXSS

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

样式导入

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

全局配置

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

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

[注意]：tabBar标签配置的页面必须放到pages显示页面的最前面

数据请求

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

在这里插入图片描述

 

6.导航、传参、生命周期

页面导航

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

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

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

导航传参

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

[注意]：一般在data中定义query:{ }来保存传递的参数

下拉刷新与上拉触底

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

[注意]：上拉触底需要做节流处理，将频繁多次的上拉触底操作变成一次，即不重复发送网络请求

在这里插入图片描述

生命周期

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

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

[注意]：onLoad和onReady使用比较多

  • onLoad：监听页面加载，可以初始化页面数据、转存页面携带的参数
  • onReady：监听页面初次渲染完成，可以修改页面内容，如：修改当前页面标题内容

 

WXS

在这里插入图片描述
加粗样式

在这里插入图片描述

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

[注意]：wxs中定义的函数不能作为事件回调函数，借鉴了js但是两种不同的语言

339+
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序-入门
qq_44715376的博客
01-02 1129
入门微信小程序
微信小程序 --- 小程序基础知识
每天都要努力学习哦~~
02-26 2103
什么是微信小程序微信小程序是一种运行在微信内部的 轻量级 应用程序。在使用小程序时 不需要下载安装，用户 扫一扫 或 搜一下 即可打开应用。它也体现了 “用完即走” 的理念，用户不用关心安装太多应用的问题。它实现了应用“触手可及”的梦想，应用无处不在，随时可用，但又 无须安装卸载。特点小程序的四大特性：无须安装、用完即走、无须卸载、触手可及无须安装：体积小，用户感知不到下载的过程触手可及：用户 扫一扫 或 搜一下 即可打开应用，通过下拉能访问使用的小程序用完即走，无须卸载。
微信小程序---基础知识
m0_56769104的博客
07-09 701
在将小程序项目创建好以后，我们先来熟悉小程序项目的目录结构，如下图：
微信小程序----第四天（基础加强）
程序研博客
03-17 3537
一、自定义组件 自定义组件 - 组件的创建与引用 1. 创建组件 1.在项目的根目录中，鼠标右键，创建 components -> test 文件夹 2.在新建的 components -> test 文件夹上，鼠标右键，点击“新建 Component” 3.键入组件的名称之后回车，会自动生成组件对应的 4 个文件，后缀名分别为 .js，.json， .wxml 和 .wxss 注意：为了保证目录结构的清晰，建议把不同的组件，存放到单独目录中，例如： 2. 引用组件 组件的.
微信小程序---代码构成讲解基础篇
m0_62166053的博客
09-05 1058
来自《黑马程序员》知识汇总
微信小程序-仿智行火车票12306
2401_84132479的博客
04-20 1100
文章会持续更新的。绝对干货！！！Android进阶学习全套手册关于实战，我想每一个做开发的都有话要说，对于小白而言，缺乏实战经验是通病，那么除了在实际工作过程当中，我们如何去更了解实战方面的内容呢？实际上，我们很有必要去看一些实战相关的电子书。
微信小程序-基础知识
program哲学
05-18 435
介绍微信小程序开放必备基础概念
微信小程序--基础（1）
囦不在地球的博客
05-23 994
微信小程序，简称小程序，英文名 Mini Program，对于开发者而言，小程序开发门槛相对较低，难度不 及APP，能够满足简单的基础应用，适合生活服务类线下商铺以及非刚需低频应用的转换。手机安装 软件 app。
微信小程序-文件基础(持续更新)
juzhengoo的博客
01-08 931
消除代码运行的一些不安全之处，保证代码运行的安全；根目录：起源于早期将Windows文件的分级管理比喻成大树形状，驱动器一级文件夹就相当于大树的根部，故称根目录。下级文件夹依次展开，就像大树的分枝，逐级展开。作用：存放，构成小程序的各个页面的代码文件，如下图pages文件中存放了index，logs，main子文件夹。作用：存放公用的代码。.eslintric.js文件夹：.eslintrc.js是一个ESLint配置文件，作用：用于识别和报告在ECMAScript/JavaScript代码中发现的模式。
微信小程序--立体清新文字
海到无边天作岸 山登绝顶我为峰
03-01 2783
效果展示 Demo代码 index.wxml <view class="word" style="--x: 6; --y: -6;"> <view style="--index: 0; --alpha-l: 0.125; --alpha-u: 0.25;">P</view><view style="--index: 1; --alpha-l: 0.125; --alpha-u: 0.25;">u</view><view style="
微信小程序-模仿QQ小程序
05-13
通过这个模仿QQ小程序的项目，开发者不仅能学习到微信小程序的基础知识，还能了解到如何将已有的成熟产品功能融入到自己的小程序中，从而提升开发水平和创新能力。无论是对个人技能提升还是实际项目开发，都有很大的...
微信小程序 ---- 组件应用和实际开发的DEMO
01-09
微信小程序是一种轻量级的应用开发平台，主要针对移动端，由腾讯公司推出，旨在提供便捷的、无需下载安装即可使用的线上服务。本主题聚焦于微信小程序的组件应用与实际开发，通过一系列DEMO来深入理解其核心功能和...
微信小程序-微信小程序-新闻客户端
08-06
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要应用于移动端，旨在提供便捷的、无需...通过学习和实践这个项目，开发者可以深入理解微信小程序的开发技术和流程，为构建更多实用的小程序打下坚实基础。
微信小程序-外卖小程序demo
05-13
微信小程序是一种轻量级的应用开发平台，主要用于在微信内部运行，为...通过学习和研究这个demo，开发者不仅可以掌握微信小程序的基础知识，还能了解到外卖业务的常见功能实现，为自己的小程序开发项目打下坚实基础。
微信小程序-婚礼邀请函源码
04-24
总的来说，"微信小程序-婚礼邀请函源码"是一个实践性的学习资源，它涵盖了小程序开发的基础知识和实战技巧。通过分析和修改这个项目，初学者能够快速掌握小程序开发的基本流程，同时也能了解到如何利用小程序为特定...
STM32HAL库+ESP8266+cJSON+微信小程序_连接华为云物联网平台
心之所向
07-12 661
基于华为云IoT平台的物联网系统的主要功能是通过STM32硬件设备，实现了温湿度、光照等环境参数的实时采集，并通过WiFi模块上传到华为云IoT平台。用户通过微信小程序可以实时查看这些数据，并设置相应的阈值。当参数超过阈值时，小程序会发出报警，并自动发送控制命令到硬件设备，实现自动化的环境调控。此外，小程序还提供了数据可视化的功能，支持折线图等图形展示，帮助用户更好地分析和理解数据。
【微信小程序知识点】转发功能的实现
最新发布
weixin_51781852的博客
07-12 147
2.通过给button组件设置属性open-type="share",可以在用户点击按钮后触发Page.onShareAppMessage事件监听函数。1.页面js文件必须声明onShareAppMessage事件监听函数，并自定义转发内容。只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮。转发功能，主要帮助用户更流畅地与好友分享内容与服务。
微信小程序之使用上拉加载实现图片懒加载
07-10 446
微信小程序图片懒加载，基于自带事件触底事件实现，单列模式的图片懒加载，可以自己控制啥时候加载，通过对数据的调整可以做到无感知！ 如果要图片占位的话，需要调整对应的代码！
微信小程序 - 本地存储 增加有效期
觉醒法师的专栏
07-09 676
小程序的本地存储并没有明确的有效期设置，存储的数据在不超过限制的情况下，会一直保留。小程序提供的本地存储API没有明确设置有效期的功能。为了解决这个问题，我们需要在存储数据时附加一个expiration字段，用于记录数据的过期时间，在获取数据时，检查当前时间是否超过了expiration指定的时间，如果超过则认为数据已失效。由于此方法不是由小程序API直接支持的功能，而是通过检查数据的有效性来模拟有效期行为，小程序本地存储不会自动检查删除过期数据，需要在使用数据时检查数据的有效性。
微信小程序开发-计算器-案例实现.pptx
11-28
这为我们今后的微信小程序开发工作奠定了基础，也提供了实际的案例参考。 通过本案例实现，我们还发现了微信小程序开发中的一些常见问题和注意事项，例如页面元素的样式和布局调整、事件处理函数的编写方式、以及...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值