微信小程序原生开发功能合集一:微信小程序开发介绍

news2024/11/19 5:56:03

一、专栏介绍

  本专栏主要内容为微信小程序常用功能开发过程的介绍说明,包括开发微信小程序常用组件的封装、常用功能的开发等,提供源代码、开发过程讲解视频、完整的课程等。

  组件封装: 下拉选择组件、图片上传组件、视频上传组件、富文本组件、列表界面组件、筛选组件、多选框组件、单选框组件、表格组件等。

  常用功能: 登录注册、授权界面、商品详情、商品列表、个人信息、修改信息、修改密码、关于我们、常见问题、文章详情、表单界面、图表界面等。
&

二、本章内容

  本章主要介绍微信小程序开发基础知识,包括开发前的相关准备、常用工具、开发过程中的注意事项、项目创建过程、项目创建后的目录结构等内容。

  小程序基础开发知识可通过小程序官方文档进行学习查看:小程序官方文档

  另外还提供小程序开发基础知识讲解课程,包括小程序开发基础知识、组件封装、常用接口组件使用及常用功能实现等内容,具体如下:
   1. CSDN课程: https://edu.csdn.net/course/detail/37977
   2. 51CTO课程:https://edu.51cto.com/course/100044719.html
   3. B站视频合集:

微信小程序原生开发功能合集之下拉选择组件封装第一节:组件规划

   4. 西瓜视频合集:https://www.ixigua.com/7188178861195002407

   5. 百度视频合集:https://baijiahao.baidu.com/builder/preview/s?id=1754693753661777020

  注意:CSDN及51CTO课程比较完善具体且提供对应的源码及答疑服务,B站及本专栏源码需要额外收费,且不提供专门的答疑服务。

在这里插入图片描述

三、基础知识

微信小程序
  小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和>传播,同时具有出色的使用体验。

  微信小程序开发需要先申请账号,账号包括个人账号和企业账号,个人账号无需认证,企业账号需要审核认证。
小程序注册
  个人账号有一些接口无法进行使用,且有一些接口即时企业认证了还需要单独申请才能使用,申请时需要相应的资质,主要是音视频播放、位置相关接口等,具体规范如下:

  1. 小程序运营规范
  2. 开放的服务类目

  小程序注册时需要填写邮箱,通过邮箱可进行注册,邮箱激活后需要进行信息登记,登记时可选择个人账号还是企业账号,还需绑定管理者微信账号,后续可通过绑定的管理者微信账号进行登录管理小程序。具体流程参考:小程序接入指南
在这里插入图片描述
注册信息登记
绑定管理员信息

3.1 官网:

  微信小程序官网
在这里插入图片描述

3.2 文档:

  微信小程序开发文档
在这里插入图片描述

3.3 其它:

  小程序注册完成后,需要进行基本信息的配置,包括小程序基本信息、服务器信息、开发人员信息等。
登录界面

  1. 完善小程序信息
      填写小程序基本信息,包括名称、logo等内容。
    在这里插入图片描述
  2. 获取APPID
      获取小程序的appid及sercret信息,后续开发需要使用,在开发设置中可配置服务器相关信息、包括服务ip地址、域名等信息。
    在这里插入图片描述
  3. 开人员配置
    在这里插入图片描述
      其他相关操作流程请参考官网文档:小程序接入指南
    .

3.4 注意事项

  1. 界面设计规范
      小程序官方提供了一套界面设计规范,具体请参考:小程序界面设计规范。主要内容如下包括:友好礼貌、清晰明确、便捷优雅、统一稳定、视觉规范,并提供了专门的设计资源:设计资源
    在这里插入图片描述

  另外小程序还提供了专门的ui组件库WeUI,包括表单组件、基础组件、操作反馈、导航相关组件、搜索相关组件、层级规范等内容,具体参考:WeUI
在这里插入图片描述
  针对pc端小程序,提供专门的适配指南,主要介绍了适配方法、布局方式、设计指引等,具体参考:小程序大屏适配指南
在这里插入图片描述

  1. 平台运营规范
      小程序进行了明确的运营规范,包括各种行为规范、争议解决、用户隐私、特殊接口限制、行业类目限制等,针对一些设计用户隐私及体验的功能及接口进行比较严格的限制说明,主要包括对位置信息的限制、音视频相关接口的限制、用户开发信息修改接口的限制等,具体可参考微信运营规范:微信运营规范
    在这里插入图片描述
  2. 主体资质问题
      小程序在开通相应行业时,需要特定的资质,有些接口需要特定行业才能使用,如视频、后台定位、后台播放等接口,具体类目需要的资质规范参考:小程序开放的服务类目
    在这里插入图片描述
    在这里插入图片描述

四、开发工具

  微信小程序有专门的官方开发工具,介绍下载地址:微信开发者工具,本开发工具可开发微信小程序、小游戏、插件及微信网页开发等。
在这里插入图片描述

五、项目创建

  微信项目新建时可选择项目类型:小程序、小游戏、插件等,也可选择具体使用的开发方式,包括云开发、普通开发等。
在这里插入图片描述
  项目创建时可选择具体的开发语言,包括JavaScript和TypeScript两种:
在这里插入图片描述

六、结构目录

  小程序创建完成后会自动生成项目框架,包括pages文件加、utils文件夹及项目配置相关文件,可添加static文件夹用于存放静态资源,添加components文件夹用于存放小程序组件,具体文件夹作用如下:

文件夹说明
pages存放小程序项目页面代码目录
utils存放小程序工具方法js文件目录
static存放小程序静态资源相关目录,如图片、视频等
components存放小程序自定义组件代码目录
app.js小程序逻辑
app.json小程序公共配置
app.wxss小程序公共样式表

  其他请参考官网:目录结构

在这里插入图片描述

七、参考引用

  主要参考微信小程序官网相关文档,部分截图来自小程序官网及帮助文档界面。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/163520.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C# Dictionary(字典)各种属性的用法

C# Dictionary(字典)各种属性的用法 要使用Dictionary集合,需要导入C#泛型命名空间! ​System.Collections.Generic​(程序集:mscorlib) Dictionary的描述 1、从一组键(Key)到一组值…

seo关键词排名下降怎么办(SEO网站关键词排名不稳定)

关键词优化网站排名突然下降是什么原因 一般来讲,网站的排名不会大幅度的下降,除非搜索引擎的流量特别小,而这也不是偶然发生的。网站一旦获得对应的权重或者排名,就不要轻易的更改板块和文章,甚至是文章标题之类的&a…

Allegro如何导出和导入层叠操作指导

Allegro如何导出和导入层叠操作指导 在做PCB设计的时候,需要导出或者导入层叠,Allegro升级到了172以后,支持单独导出和导入层叠,如下图 具体操作如下 导出层叠,选择setup选择Cross-section

《图机器学习》-Message Passing and Node Classification

Message Passing and Node Classification一、前言二、How do we leverage node correlation in network?三、Relational Classification四、Iterative classification五、Loopy Belief Propagation一、前言 现在的主要问题是: 给定一个网络&#xff0c…

利用idea把项目上传到不同的仓库

前言 以项目已经创建好,并已经和一个远程仓库地址联通的情况下。 由于GitHub经常会出现问题,毕竟国外的东西,时常会不稳定,所以我们有时候也会使用国产Git代码管理工具——码云。 说真的,码云可真的是一个好东西。要…

SpringBoot原理-自动配置-Condition

目录 分析 通过获取 run() 的返回值再获取容器中的bean Conditional() 注解 解说案例 1.导入Jedis坐标后,加载该Bean,没导入,则不加载 思考 spring-boot-autoconfigure condition包 ConditionalOnClass ConditionalOnBean Conditi…

Python【bs4模块】讲解

导入:from bs4 import BeautifulSoup#爬取某豆的电影榜单 import pprint import requests from bs4 import BeautifulSoup class pachong:#pass #这段代码的意思如果暂时没有想好在类中定义任何属性和方法,你可以先写pass Python就会认为这段不会运行直接…

基于GeoDa软件的省级人口经济空间分析

前言本为从地统计学角度,借助空间自相关的方法,从县域尺度,研究江西省各县经济发展水平之间的相关关系,及经济发展与人口之间的相关关系,直观的说明江西省2000年的经济发展状况。通过对各市第一、第二、第三产业的GDP等…

Servlet总结(未完待续)

Servlet总结一. 简介二. Servlet执行流程三. 生命周期四. 体系结构五. urlPattern配置匹配规则六. Request和Response1. Request1.1 Request继承体系1.2 Request获取请求数据API1.3 通用方式获取请求参数1.4 通用方式中文乱码解决1.5 Request请求转发2.1 Response一. 简介 Ser…

轻量级 Java 权限认证框架——Sa-Token

Sa-Token 介绍 Sa-Token 是一个轻量级 Java 权限认证框架,主要解决:登录认证、权限认证、单点登录、OAuth2.0、分布式Session会话、微服务网关鉴权 等一系列权限相关问题。 Sa-Token最新开发文档地址:https://sa-token.cc Sa-Token功能结构图…

MySQL最左匹配原则

说到最左匹配原则,我们还得先从组合索引说起。 SET NAMES utf8mb4; SET FOREIGN_KEY_CHECKS 0;-- ---------------------------- -- Table structure for user -- ---------------------------- DROP TABLE IF EXISTS user; CREATE TABLE user (id int(5) NOT NU…

【Java AWT 图形界面编程】LayoutManager 布局管理器 ⑥ ( BoxLayout 布局 )

文章目录一、BoxLayout 布局二、BoxLayout 布局 API三、BoxLayout 布局代码示例1、BoxLayout 布局垂直排列代码示例2、BoxLayout 布局水平排列代码示例一、BoxLayout 布局 BoxLayout 布局 不是 AWT 中的布局 , 而是 Swing 中引入的 ; 在 BoxLayout 布局 中 , 可以 在 垂直 和 …

[Effective Objective] 对象、消息、运行期

对象:“对象”(object)就是“基本构造单元”(building block),开发者可以通过对象来储存并传递数据。 消息:在对象之间传递数据并执行任务的过程就叫做“消息传递”(Messaging)。 运行期&…

最粗暴的方法实现一个栈

对于栈和队列是一个很简单的知识,用的感觉也不是很多,但是,我们仍然的学习!!加油!!在实现最简单的栈之前,我们需要简单了解一下栈是什么??栈(stac…

iplatform平台简介

前置条件:原则规范一)统一技术栈1)关于JDK统一使用Open JDK,版本最低1.8,几年后可能会升级到17;避免使用Sun JDK,这是商业软件,而且包含部分私有(com.sun)类库…

pandas 实战:分析三国志人物

简介 背景 Pandas 是 Python 的一个工具库,用于数据分析。由 AQR Capital Management 于 2008 年 4 月开发,2009 年开源,最初被作为金融数据分析工具而开发出来。Pandas 名称来源于 panel data(面板数据)和 Python d…

基于SEIR模型的传染病预测软件开发(完整代码+数据集+报告)

1 操作页面及用户使用说明(1) 界面说明App页面主要分为4个区域,分别是:曲线显示区、模型初始化和预防参数设定区、传染病特征参数设定区、绘图控制区。① 曲线显示区:显示模型预测的不同人数量随时间的变化曲线。② 模型初始化和预防参数设定…

泛函分析中的向量空间

一、向量空间背景 (1) 具有如下点内积或标量内积的实数域RRR上的欧式空间RNR^NRN: ⟨u,v⟩uTvu0v0u1v1⋯uN−1vN−1∑i0N−1uivi\langle\boldsymbol{u}, \boldsymbol{v}\rangle\boldsymbol{u}^{\mathrm{T}} \boldsymbol{v}u_{0} v_{0}u_{1} v_{1}\cdotsu_{N-1} v_{…

SpringCloud-Netflix学习笔记——微服务和微服务架构

一、什么是微服务? 什么是微服务?微服务(Microservice Architecture)是近几年流行的一种架构思想,关于它的概念很 难一言以蔽之。究竟什么是微服务呢?我们在此引用 ThoughtWorks 公司的首席科学家 Martin F…

谷粒商城-高级篇-Day11-商城业务

文章目录整合thymeleaf渲染页面页面修改不重启服务器实时更新渲染二三级数据nginx-搭建域名访问环境一nginx-搭建域名访问环境二整合thymeleaf渲染页面 将index放到product的资源下的static目录&#xff0c;index.html放到templates文件夹下 导入thymeleaf <!-- 模板引擎…