微信小程序入门教程

article/2025/11/4 16:01:38

本文档将带你一步步创建完成一个微信小程序，并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语以及当前用户的微信头像，点击头像，可以在新开的页面中查看当前小程序的启动日志。下载源码

1. 获取微信小程序的 AppID

如果你是收到邀请的开发者，我们会提供一个帐号，利用提供的帐号，登录 https://mp.weixin.qq.com ，就可以在网站的“设置”-“开发者设置”中，查看到微信小程序的 AppID 了，注意不可直接使用服务号或订阅号的 AppID 。
如果没有收到内测邀请，可以跳过本步骤
这里写图片描述
注意：如果要以非管理员微信号在手机上体验该小程序，那么我们还需要操作“绑定开发者”。即在“用户身份”-“开发者”模块，绑定上需要体验该小程序的微信号。本教程默认注册帐号、体验都是使用管理员微信号。

2. 创建项目

我们需要通过开发者工具，来完成小程序创建和代码编辑。

开发者工具安装完成后，打开并使用微信扫码登录。选择创建“项目”，填入上文获取到的 AppID ，设置一个本地项目的名称（非小程序名称），比如“我的第一个项目”，并选择一个本地的文件夹作为代码存储的目录，点击“新建项目”就可以了。

为方便初学者了解微信小程序的基本代码结构，在创建过程中，如果选择的本地文件夹是个空文件夹，开发者工具会提示，是否需要创建一个 quick start 项目。选择“是”，开发者工具会帮助我们在开发目录里生成一个简单的 demo。

这里写图片描述

项目创建成功后，我们就可以点击该项目，进入并看到完整的开发者工具界面，点击左侧导航，在“编辑”里可以查看和编辑我们的代码，在“调试”里可以测试代码并模拟小程序在微信客户端效果，在“项目”里可以发送到手机里预览实际效果。

3. 编写代码

创建小程序实例

点击开发者工具左侧导航的“编辑”，我们可以看到这个项目，已经初始化并包含了一些简单的代码文件。最关键也是必不可少的，是 app.js、app.json、app.wxss 这三个。其中，.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件。微信小程序会读取这些文件，并生成小程序实例。

下面我们简单了解这三个文件的功能，方便修改以及从头开发自己的微信小程序。

app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API，如本例的同步存储及同步读取本地数据。想了解更多可用 API，可参考 API 文档

//app.js
App({onLaunch: function () {//调用API从本地缓存中获取数据var logs = wx.getStorageSync('logs') || []logs.unshift(Date.now())wx.setStorageSync('logs', logs)},getUserInfo:function(cb){var that = this;if(this.globalData.userInfo){typeof cb == "function" && cb(this.globalData.userInfo)}else{//调用登录接口wx.login({success: function () {wx.getUserInfo({success: function (res) {that.globalData.userInfo = res.userInfo;typeof cb == "function" && cb(that.globalData.userInfo)}})}});}},globalData:{userInfo:null}
})

app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释。更多可配置项可参考配置详解

{"pages":["pages/index/index","pages/logs/logs"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "WeChat","navigationBarTextStyle":"black"}
}

app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。

/**app.wxss**/
.container {height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: space-between;padding: 200rpx 0;box-sizing: border-box;
}

创建页面

在这个教程里，我们有两个页面，index 页面和 logs 页面，即欢迎页和小程序启动日志的展示页，他们都在 pages 目录下。微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中，且 pages 中的第一个页面是小程序的首页。

每一个小程序页面是由同路径下同名的四个不同后缀文件的组成，如：index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件，.wxml后缀的文件是页面结构文件。

index.wxml 是页面的结构文件：

<!--index.wxml-->
<view class="container"><view  bindtap="bindViewTap" class="userinfo"><image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image><text class="userinfo-nickname">{{userInfo.nickName}}</text></view><view class="usermotto"><text class="user-motto">{{motto}}</text></view>
</view>

本例中使用了<view/>、<image/>、<text/>来搭建页面结构，绑定数据和交互处理函数。

index.js 是页面的脚本文件，在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例，声明并处理数据，响应页面交互事件等。

//index.js
//获取应用实例
var app = getApp()
Page({data: {motto: 'Hello World',userInfo: {}},//事件处理函数bindViewTap: function() {wx.navigateTo({url: '../logs/logs'})},onLoad: function () {console.log('onLoad')var that = this//调用应用实例的方法获取全局数据app.getUserInfo(function(userInfo){//更新数据that.setData({userInfo:userInfo})})}
})

index.wxss 是页面的样式表：

/**index.wxss**/
.userinfo {display: flex;flex-direction: column;align-items: center;
}.userinfo-avatar {width: 128rpx;height: 128rpx;margin: 20rpx;border-radius: 50%;
}.userinfo-nickname {color: #aaa;
}.usermotto {margin-top: 200px;
}

页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。

index.json 是页面的配置文件：

页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。

logs 的页面结构

<!--logs.wxml-->
<view class="container log-list"><block wx:for="{{logs}}" wx:for-item="log"><text class="log-item">{{index + 1}}. {{log}}</text></block>
</view>

ogs 页面使用 <block/> 控制标签来组织代码，在<block/> 上使用 wx:for 绑定 logs 数据，并将 logs 数据循环展开节点

//logs.js
var util = require('../../utils/util.js')
Page({data: {logs: []},onLoad: function () {this.setData({logs: (wx.getStorageSync('logs') || []).map(function (log) {return util.formatTime(new Date(log))})})}
})

运行结果如下：

这里写图片描述

4. 手机预览

开发者工具左侧菜单栏选择”项目”，点击”预览”，扫码后即可在微信客户端中体验。

这里写图片描述

文档转载来源：微信官方入门教程

  • 小程序API
  • 小程序开发工具下载
  • 框架介绍

http://chatgpt.dhexx.cn/article/1p2J0y1A.shtml

相关文章

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…
阅读更多...
vue 后台系统中多页面标签

vue 后台系统中多页面标签

在后台开发中&#xff0c;常用一种页面标签工具&#xff0c;每次点击菜单栏时&#xff0c;会在页面区域上方增加一个【标签页】如下图&#xff0c;可关闭&#xff0c;可切换页面等功能&#xff0c;常见于后台管理系统中。 以前&#xff0c;我以为这个是利用tabs组件开发的&…
阅读更多...
js关闭浏览器页签

js关闭浏览器页签

兼容性 js实现 function closeWebPage(){if (navigator.userAgent.indexOf("MSIE") > 0) {if (navigator.userAgent.indexOf("MSIE 6.0") > 0) {window.opener null;window.close();}else {window.open(, _top);window.top.close();}}else if (nav…
阅读更多...
layui————一个页面展示两个页签

layui————一个页面展示两个页签

html页面 <!DOCTYPE html> <html> <head><meta charset"utf-8"><link rel"stylesheet" href"../../../build/css/base.css" media"all"> </head> <body> <div class"layui-tab la…
阅读更多...
SAP BP屏幕增强页签

SAP BP屏幕增强页签

导语&#xff1a;最近收到了BP的需求&#xff0c;要增加页签&#xff0c;找了一些资料&#xff0c;发现BP的增强页签可是真麻烦啊&#xff0c;下面把我梳理出来的分享一下。 &#x1f449;【增强记录清单…】 需求&#xff1a; 需求是在供应商界面增加一个页签&#xff0c;用…
阅读更多...
修改浏览器页签名称

修改浏览器页签名称

第一种若是整个系统要统一修改为一个名称 在public文件夹下index.html下直接修改或者在相应配置文件package.json或者其他&#xff08;看项目配置&#xff09; 第二种某一个路由或者菜单页签不一样的名称 可以配置到后置路由中或者组件内 语句为:document.title 测试
阅读更多...
vue实现tagsview多页签导航功能

vue实现tagsview多页签导航功能

文章目录 前言一、效果图二、实现思路1. 新建 tags-view.js2. 在Vuex里面引入 tags-view.js3. 新建 tabsView 组件4. 新建 ScrollPane 组件5. 引入 tabsView 组件6. 使用 keep-alive 组件&#xff0c;进行页签的缓存 总结 前言 基本上后台管理系统都需要有多页签的功能&#x…
阅读更多...
基于微前端qiankun的多页签缓存方案实践

基于微前端qiankun的多页签缓存方案实践

作者&#xff1a;vivo 互联网前端团队- Tang Xiao 本文梳理了基于阿里开源微前端框架qiankun&#xff0c;实现多页签及子应用缓存的方案&#xff0c;同时还类比了多个不同方案之间的区别及优劣势&#xff0c;为使用微前端进行多页签开发的同学&#xff0c;提供一些参考。 一、…
阅读更多...
Sublime Text的命令行工具subl

Sublime Text的命令行工具subl

在sublime的安装目录下有个subl.exe&#xff0c;是sublime编辑器为用户提供的命令行工具。 修改Windows系统的环境变量&#xff0c;将sublime的安装路径添加到环境变量里&#xff1b; 打开win的命令行提示符程序&#xff0c;输入subl -version,看到结果如下图所示&#xff1a;…
阅读更多...
Macbook Pro下安装subl命令，快速使用sublime打开代码

Macbook Pro下安装subl命令，快速使用sublime打开代码

一、使用背景 我在macbook pro电脑上经常使用编辑器直接打开代码&#xff0c;我也经常用iterm2的一些快捷命令操作目录和查看文件。这样就有了需要使用sublime打开代码的需求&#xff0c;以前的做法是&#xff0c;先用open命令打开目录&#xff0c;然后打开sublime text&#…
阅读更多...
sublime安装以及配置

sublime安装以及配置

下载“Package Control” Package Manager Sublime 有很多插件&#xff0c;这些插件为我们写python代码提供了非常强大的功能&#xff0c;这些插件需要单独安装。 而安装这些插件最方便的方法就是通过Package Control的插件&#xff0c;这其实就是一个插件管理器&#xff0c;帮…
阅读更多...
推荐文章

Copyright @ 2022~2023