当前位置: 首页 > news >正文

微信小程序开发快速开始 - 努力-

一、微信小程序简介

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

官方网址:https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN
在这里插入图片描述

小程序主要运行微信内部,可通过上述网站来整体了解微信小程序的开发。

1.1 注册

在进行小程序开发时,需要先去注册一个小程序,在注册的时候,它实际上又分成了不同的注册的主体。我们可以注册一个小程序,当然,也可以以企业政府、媒体或者其他组织的方式来注册小程序。那么,不同的主体注册小程序,最终开放的权限也是不一样的。比如以个人身份来注册小程序,是无法开通支付权限的。若要提供支付功能,必须是企业、政府或者其它组织等。所以,不同的主体注册小程序后,可开发的功能是不一样的。

在这里插入图片描述

1.2 开发者工具

微信小程序我们提供的一些开发的支持,实际上微信的官方是提供了一系列的工具来帮助开发者快速的接入。
并且完成小程序的开发,提供了完善的开发文档,并且专门提供了一个开发者工具,还提供了相应的设计指南,同时也提供了一些小程序体验DEMO,可以快速的体验小程序实现的功能。

在这里插入图片描述

1.3 接入流程

开发完一个小程序要上线,也给我们提供了详细地接入流程。
在这里插入图片描述

二、小程序开发

开发微信小程序需要做如下准备工作:

  • 1.注册小程序。
  • 2.完善小程序信息。
  • 3.下载开发者工具。

step1.小程序注册:
注册地址:https://mp.weixin.qq.com/wxopen/waregister?action=step1

在这里插入图片描述
step2.登录小程序后台
https://mp.weixin.qq.com/

完善小程序信息、小程序类目。
查看小程序的 AppID。

step3.下载开发者工具
下载地址: https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html

在这里插入图片描述
扫描登录开发者工具。
创建小程序项目。

三、小程序开发

1.1 小程序目录结构

小程序目录:
小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:
文件说明:

在这里插入图片描述
app.js:必须存在,主要存放小程序的逻辑代码。

app.json:必须存在,小程序配置文件,主要存放小程序的公共配置。

app.wxss: 非必须存在,主要存放小程序公共样式表,类似于前端的CSS样式。

每个小程序页面主要由四个文件组成:
在这里插入图片描述
js文件:必须存在,存放页面业务逻辑代码,编写的js代码。

wxml文件:必须存在,存放页面结构,主要是做页面布局,页面效果展示的,类似于HTML页面。

json文件:非必须,存放页面相关的配置。

wxss文件:非必须,存放页面样式表,相当于CSS文件。

1.2 编写小程序

1.进入到index.wxml,编写页面布局:

<view class="container"><view>{{msg}}</view><view><button type="default" bindtap="getUserInfo">获取用户信息</button><image style="width: 100px;height: 100px;" src="{{avatarUrl}}"></image>{{nickName}}</view><view><button type="primary" bindtap="wxlogin">微信登录</button>授权码:{{code}}</view><view><button type="warn" bindtap="sendRequest">发送请求</button>响应结果:{{result}}</view>
</view>

2.进入到index.js,编写业务逻辑代码:

Page({data:{msg:'hello world',avatarUrl:'',nickName:'',code:'',result:''},getUserInfo:function(){wx.getUserProfile({desc: '获取用户信息',success:(res) => {console.log(res)this.setData({avatarUrl:res.userInfo.avatarUrl,nickName:res.userInfo.nickName})}})},wxlogin:function(){wx.login({success: (res) => {console.log("授权码:"+res.code)this.setData({code:res.code})}})},sendRequest:function(){wx.request({url: 'http://localhost:8080/user/shop/status',method:'GET',success:(res) => {console.log("响应结果:" + res.data.data)this.setData({result:res.data.data})}})}})

3.编译,点击编译按钮,运行。

1.3 发布小程序

小程序的代码已经开发完毕,要将小程序发布上线,让所有的用户都能使用到这个小程序。

1.点击上传按钮,并指定版本号。提示上传成功。
把代码上传到微信服务器就表示小程序已经发布了吗?
其实并不是。当前小程序版本只是一个开发版本。

2.把代码上传到微信服务器,前小程序版本只是一个开发版本。进到微信公众平台,打开版本管理页面。
需提交审核,变成审核版本。审核通过后,进行发布,变成线上版本。

一旦成为线上版本,这就说明小程序就已经发布上线了,微信用户就可以在微信里面去搜索和使用这个小程序了。

http://www.jsqmd.com/news/433157/

相关文章:

  • 2026年偶联剂厂家实力推荐:偶联剂/钛酸酯偶联剂/铝酸脂偶联剂/硅烷偶联剂/铝钛复合偶联剂/固体钛酸酯偶联剂,专业品牌深度解析与选购指南 - 品牌推荐用户报道者
  • 02-路径参数
  • AI大模型应用开发-LangChain核心组件 - 努力-
  • 04-请求体参数
  • P7521 [省选联考 2021 B 卷] 取模
  • 2026年3月荧光光谱仪厂家推荐,材料元素分析实力厂家 - 品牌鉴赏师
  • 03-查询参数
  • 05-响应类型-HTML格式
  • Pandas学习之DataFrame
  • Godot游戏练习01-第1节-创建玩家场景
  • 20260303之所思 - 人生如梦
  • RHCE定时任务(一)at命令
  • 2026年WordPress运维SEO策略全解析
  • Springboot快速开始 - 努力-
  • Java核心语法-Stream详解 - 努力-
  • 01-路由
  • 2026年3月珠海复式楼装修设计公司推荐:挑空层设计与利用率提升 - 品牌鉴赏师
  • 从“黑盒”到“全景”:在.NET中拥抱OpenTelemetry与SigNoz的可观测工具
  • TS+VUE3
  • 深入解析Qt事件处理机制:从原理到实战,构建响应式GUI应用
  • LeetCode 378 有序矩阵中第 K 小的元素:python3 题解
  • LeetCode 88 合并两个有序数组:python3 题解
  • Python核心语法-文件操作、os模块和常用标注库 - 努力-
  • 零基础联通云部署实战:三维编辑器上云全记录
  • Last Meeting Theory(最后相遇理论)and Soulmate(灵魂伴侣)
  • 基于ssm的学生健康管理系统w4apa20f(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
  • 拆解百度智能运营平台:AI应用架构师能借鉴的4个架构设计理念
  • 从大模型推理边界看职业壁垒:为什么说接入云端大模型API只是人机协作的第一步?
  • YOLO11 改进 - SPPF模块 替代SPPF, Mona多认知视觉适配器(CVPR 2025):打破全参数微调的性能枷锁:即插即用的提点神器
  • 基于ssm家电售后服务管理系统d9x66u24(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。