微信小程序入门文档

article/2025/11/4 16:09:36

小程序入门文档

微信小程序介绍

微信小程序，简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。

img

小程序官方文档地址：https://developers.weixin.qq.com/miniprogram/dev/framework/

  • 小程序账号注册
  • 微信开发者工具介绍
  • 项目创建
  • 基础知识
  • 小程序发布流程

一. 小程序注册

注册小程序

1.进入微信公众平台 (mp.weixin.qq.com)，点击注册。

2.填写邮箱和密码

注意：邮箱必须是之前未注册过公众号和小程序的邮箱地址

3.激活邮箱

4.信息登记

在这里插入图片描述

注意：

  1. 使用邮箱注册时一个邮箱只能申请一个小程序
  2. 邮箱不能使用注册过小程序、公众平台、开放平台、企业号以及绑定过个人微信号的邮箱
  3. 选择个人主体不能使用微信支付、卡包功能
  4. 附近的小程序功能只支持企业、政府、媒体等信息
  5. 填写主题信息的时候一定要保证信息的准确性，主体信息一旦提交不可以修改变更
  6. 选择企业主体时上传企业资本资料时需要签名加公章，保证图片清晰度，否则会审核不通过。
  7. 已经申请过微信公众号的企业可以直接在公众号后台选择小程序管理关联小程序

获取AppID

AppID是小程序的唯一标识， 创建小程序项目的时候需要填写这个AppID

1.进入微信公众平台 (mp.weixin.qq.com)，填写注册好的小程序账号，点击登录。

2.点击左侧菜单中的【开发】选项，然后再选择【开发设置】就可以看到AppID了

在这里插入图片描述

二. 微信开发者工具

1.在浏览器中打开微信开发者工具下载地址

2.选择【稳定版】进行下载

下载地址: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

![devtools](https://res.wx.qq.com/wxdoc/dist/assets/img/main.01aed00c.png

在这里插入图片描述

更多关于开发者工具介绍请查看官方文档

三. 项目创建

项目创建流程

  1. 打开微信开发者工具,使用绑定过微信小程序的微信扫描二维码，

  2. 选择左侧选择小程序，右侧选择新建项目

在这里插入图片描述

  1. 填写项目名称和选择目录,填写刚才在小程序后台【开发】【开发设置】中获取到的AappID

选择的文件夹必须是一个空文件夹

传统开发模式和云开发模式的区别
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

项目文件介绍

1. 主要文件介绍

  • project.config.json 开发者工具配置
  • app.json 项目全局配置、路由配置文件
  • app.js 入口文件

  • miniprogram 项目源代码

  • pages 页面

  • cloudfunctions 云函数

2. 页面文件类型介绍

  • .json 静态数据配置文件
  • .wxml 微信模板文件，类似网页开发的html文件
  • .wxss 微信样式表文件，用于定于页面样式
  • .js 脚本文件，代码逻辑写在这

3. 配置文件介绍

project.config.json

  • miniprogramRoot：小程序源代码文件目录

  • cloudfunctionRoot：小程序云发开目录

  • setting：项目其他配置

  • appid：项目appid

  • projectname：项目名称

  • libVersion：项目版本库的版本

app.json

  • pages：页面配置

  • window：窗口配置

  • backgroundColor: 窗口背景色

  • tabBar：底部导航配置

  • color 文字颜色

  • list 底部菜单项

5.3 page.json 页面配置

更多详细配置介绍：小程序开发文档

四. 基础知识

数据绑定和常用属性-WXML

1. 数据绑定

在page中的data定义数据，在wxml中使用双花括号{{}}使用数据

{{ mes }}

 <image src="{{src}}"></image>
2. 常用属性

数据循环wx:for

默认item为循环的内容，index为索引

<view wx:for="{{JsonList}}">` {{ item }}  {{index}}</view>`

条件渲染wx:if

<view wx:if="{{isLogin}}">登录</view><view wx:else>未登录</view>

显示隐藏 hidden

<view hidden="{{isLogin}}">登录</view><view hidden="{{!isLogin}}">未登录</view>

wx:if和hidden的区别是 前者会把标签从结构中移除，hidden则只是将标签隐藏

更多组件请查看官方文档中的组件介绍

事件绑定

点击事件bindtap

<button bindtap="clickName">Click me</button>
<button bind:tap="clickName">Click me</button>

点击事件catchtap （禁止事件冒泡）

<button catchtap="clickName">Click me</button>

页面样式-wxss

  • 单位使用 rpx

  • 使用 @import ‘name.css’ 引入其他样式文件

  • UI样式库：WeUI、iView Weapp、Vant Weapp

页面交互-js（重点）

  • 在data中定义数据，页面中使用{{data}}使用

  • 修改数据使用this.setData方法

  • 函数传参：在标签使用data-自定义属性，然后在函数的event.currentTarget.dataset对象中获取值

网络请求

在这里插入图片描述

在微信小程序中自带的请求方法是wx.request(Object object),这个和jquery的ajax、axios的使用方法都大同小异，但是最重要的一点是wx.request返回的不是promise,所以不能使用.then方法。但是可以使用下载其他的插件库来代替原生的请求方法，比如**Request-Promise**具体使用方法查看GIthub文档介绍

下面演示一下如何发送一个小程序原生的wx.request请求

wx.request({url: 'test.php', //仅为示例，并非真实的接口地址data: {x: '',y: ''},header: {'content-type': 'application/json' // 默认值},success (res) {console.log(res.data)}
})

默认情况小程序只允许请求https的域名，如果需要请求http的域名必须在右上角【详情】里面的【本地设置】中把不校验合法域名和https证书那个勾选上

在这里插入图片描述

页面跳转

在小程序中实现页面跳转有两种方式，组件跳转和js方法跳转

  1. 第一种是在wxml中使用navigator组件进行跳转

navigator

<navigator url="/page/navigate/navigate?title=navigate">跳转到新页面</navigator>
  1. 第二种是在Js中跳转

wx.navigateTo

wx.navigateTo({url: 'test?id=1',
})

生命周期函数

页面生命周期
  • onLoad 监听页面加载
  • onReady 监听页面初次渲染完成
  • onShow 监听页面显示
  • onHide 监听页面隐藏
组件生命周期
  • attached 在组件实例进入页面节点树时执行
  • detached 在组件实例被从页面节点树移除时执行

示例

Component({lifetimes: {attached: function() {// 在组件实例进入页面节点树时执行},detached: function() {// 在组件实例被从页面节点树移除时执行},},
})

小程序发布

小程序的发布顺序是先发布体验版，然后审核，审核完毕后才可以正式发布上线。

提交上传之前必须先填写小程序的主体信息

上线流程: 提交开发版本 > 审核 > 发布线上版本

1.发开完以后首先在小程序开发者工具中的右上角点击上传即可上传到体验版

在这里插入图片描述

2.上传完毕以后在小程序后台就可以看到开发版本中有一个刚才上传的版本，这个可以点击右边的箭头设置为体验半，在【成员管理】中添加成员即可扫二维码体验小程序。

在这里插入图片描述

3.点击提交审核即可进入审核版本

4.审核完毕后即可成为上线版本

注意

1.上传的项目大小显示为2M，超过2M会上传失败

2.项目中使用的图片不能放到项目里面，项目包会超出2M，可以使用外部链接或者base64格式图片。


http://chatgpt.dhexx.cn/article/wuaS3UXB.shtml

相关文章

微信小程序开发之官方文档学习（一）

微信小程序开发之官方文档学习（一）

小程序宿主环境 渲染层和逻辑层 小程序的运行环境分成渲染层和逻辑层&#xff1a;WXML 模板和 WXSS 样式工作在渲染层&#xff0c;JS 脚本工作在逻辑层。渲染层和数据相关&#xff1b;逻辑层负责产生、处理数据&#xff0c;通过 Page 实例的 data 属性传递数据到渲染层。 通信模…
阅读更多...
微信-小程序-开发文档-开发：开发

微信-小程序-开发文档-开发：开发

ylbtech-微信-小程序-开发文档-开发&#xff1a;开发 1. 开发指南返回顶部 1.1、 小程序提供了一个简单、高效的应用开发框架和丰富的组件及API&#xff0c;帮助开发者在微信中开发具有原生 APP 体验的服务。 本章分主题的介绍了小程序的开发语言、框架、能力、调试等内容&…
阅读更多...
微信小程序设计规范(官方)文档

微信小程序设计规范(官方)文档

为方便设计师进行设计&#xff0c;微信提供一套可供Web设计和小程序使用的基础控件库&#xff1b;同时提供方便开发者调用的资源。 基础样式库预览地址&#xff1a;https://weui.io 文末附规范文档PSD和sketch源文件下载。 视觉规范 1. 字体规范 常用字号为20&#xff0c;18…
阅读更多...
微信小程序文档api

微信小程序文档api

​ 本文档将带你一步步创建完成一个微信小程序&#xff0c;并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语以及当前用户的微信头像&#xff0c;点击头像&#xff0c;可以在新开的页面中查看当前小程序的启动日志。下载源码 1. 获取微信小程序的AppID …
阅读更多...
微信小程序设计文档

微信小程序设计文档

小程序方案设计 我设计的小程序名字叫“运动之参天大树”&#xff0c;大体上是想设计一个通过运动来种树的小程序。用户注册之后&#xff0c;可以在喜欢的地方种树&#xff0c;然后连通微信步数来换取浇水的水滴&#xff0c;对树进行浇水&#xff0c;树得到水滴之后会变大&…
阅读更多...
微信小程序开发指南，接口文档，工具下载使用

微信小程序开发指南，接口文档，工具下载使用

相信前天&#xff0c;从事互联网行业人的朋友圈给刷爆了&#xff0c;前微信公众平台开始陆续对外发送小程序内测邀请&#xff0c;而小程序即被外界广为关注的微信“应用号”。 小程序的推出也并非一蹴而就&#xff0c;早在2016年1月的微信公开课上&#xff0c;微信之父张小龙就…
阅读更多...
微信小程序开发官方文档

微信小程序开发官方文档

官方文档教程1&#xff1a;http://bcoder.cn/wxopen/ 官方文档教程2&#xff1a;http://bing.aliaii.com/wxopen/ 本文档将带你一步步创建完成一个微信小程序&#xff0c;并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语以及当前用户的微信头像&#xf…
阅读更多...
微信小程序官方开发文档

微信小程序官方开发文档

本文档将带你一步步创建完成一个微信小程序&#xff0c;并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语以及当前用户的微信头像&#xff0c;点击头像&#xff0c;可以在新开的页面中查看当前小程序的启动日志。下载源码 1. 获取微信小程序的 AppID 登…
阅读更多...
小程序开发文档

小程序开发文档

小程序开发总结 最近领导交给一个任务&#xff0c;单独开发一个小程序项目&#xff0c;还要出一篇小程序课题文档。这也是我第一次接触小程序&#xff0c;遂把领导对课题的要求以及自己开发过程中遇到的问题做如下总结&#xff1a; 1. 如何创建小程序项目 这一步在官方文档中…
阅读更多...
微信小程序入门教程

微信小程序入门教程

本文档将带你一步步创建完成一个微信小程序&#xff0c;并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语以及当前用户的微信头像&#xff0c;点击头像&#xff0c;可以在新开的页面中查看当前小程序的启动日志。下载源码 1. 获取微信小程序的 AppID 如…
阅读更多...
HTML 前端设置浏览器页签图标设置

HTML 前端设置浏览器页签图标设置

想实现如下效果&#xff1a;修改浏览器页签的图标 话不多说上代码 <!-- 修改页签icon logo --><link rel"shortcut icon" type"image/x-icon" href"images/logo.png"></link> 直接在html中head头部里修改如上代码href替换成相…
阅读更多...
webassmbly blazor实现多页签效果

webassmbly blazor实现多页签效果

最终效果如上图。 多页签使用BlazorStrap中的BSTabGroup、BSTabList组件&#xff0c;内嵌绑定的BSTab: <div><NavMenu OnShowLog"ShowLog" OnShowModel"ShowModel" /> </div> <div class"container"><BSTabGroup S…
阅读更多...
Vue的多页签组件

Vue的多页签组件

先直接看组件代码&#xff08;里面用了一些element-ui的组件&#xff0c;如果你们不用element-ui的话。可以去掉&#xff0c;自己实现&#xff09; 也可以下载Demohttps://download.csdn.net/download/rui1120119095/14155951 <template> <div class"__commo…
阅读更多...
XSSFWorkbook导出多一个Sheet页签

XSSFWorkbook导出多一个Sheet页签

问题&#xff1a;使用XSSFWorkbook导出Excel多出一个不必要Sheet页。 问题原因&#xff1a;open(FileInputStream s)打开Excel模板时会默认打开一个Sheet页&#xff08;多余的那个Sheet页&#xff09;&#xff08;该Sheet页打开顺序&#xff1a;模板第一格显示的Sheet页->模…
阅读更多...
VUEcli3设置页签图标

VUEcli3设置页签图标

vuecli3设置网页页签图标非常简单&#xff0c;三步 1.将ico格式的页签图片放置public文件夹目录下 2.在public文件夹目录下的index.html中配置页签图标 3.在vue.config.js中配置下&#xff0c;配置好了重启下项目就行了。 效果
阅读更多...
antd-design-pro实现多页签，切换页签保留缓存，keep-alive

antd-design-pro实现多页签，切换页签保留缓存，keep-alive

感谢该大佬提供的组件&#xff1a;GitHub - CJY0208/react-activation: Hack <KeepAlive /> for React react 里 keep-alive 的实现目前是黑科技&#xff0c;会有些问题 使用过程中遇到问题的话&#xff0c;可以优先看这儿 https://github.com/CJY0208/react-activatio…
阅读更多...
【微信小程序】之自定义顶部导航页签

【微信小程序】之自定义顶部导航页签

小程序系统提供的导航页签&#xff0c;只能设置字体&#xff0c;却不能自定义字体图片之类的&#xff0c;所以自己写了一个示例。 废话不多说&#xff0c;直接上代码 效果&#xff1a; app.js onLaunch: function() {wx.getSystemInfo({success: e > {this.globalData.S…
阅读更多...
ABAP:多页签的选择屏幕

ABAP:多页签的选择屏幕

在程序中创建一个100屏幕&#xff0c;然后设定子屏幕区域&#xff0c;可通过屏幕号指定页签&#xff0c;让选择屏幕更多样式&#xff0c;效果如下图&#xff1a; 实现方式如下 定义不同的选择屏幕 * 基本条件屏幕 SELECTION-SCREEN BEGIN OF SCREEN 1100 AS SUBSCREEN. SELE…
阅读更多...
【实战】1096- React 中后台系统多页签实现

【实战】1096- React 中后台系统多页签实现

在中后台管理类系统中&#xff0c;多页签的需求非常普遍&#xff0c;用户常常需要在多个页签内跳转&#xff0c;比如填写表单时去查询某个列表获取一些字段信息再回到表单页面填写。这样的需求在 Vue 中使用 keep-alive 即可实现&#xff0c;但是在 React 中&#xff0c;React …
阅读更多...
多种方式带你玩转 javascript 实现关闭浏览器页签

多种方式带你玩转 javascript 实现关闭浏览器页签

你知道的越多&#xff0c;你不知道的越多 点赞再看&#xff0c;养成习惯 如果您有疑问或者见解&#xff0c;或者没有积分想获取项目&#xff0c;欢迎指教&#xff1a; 企鹅&#xff1a;869192208 文章目录 前言方法一方法二方法三方法四方法五方法六附录 前言 近日&#xff0c…
阅读更多...
推荐文章

Copyright @ 2022~2023