小白也可以开发微信小程序（入门篇）

自媒体运营教程产品运营 2025-07-09 28

微信搜索VDS Hacker Fan 即可访问

导读

话不多说，小程序直接附上（↑）。点击图片即可访问，欢迎使用及收藏。本教程主要面向零基础却想拥有个人微信小程序的小伙伴，当然有WEB前端开发经验的朋友阅读起来会更加的ez

目标读者：零基础小白
预计教程时间：15mins
开发工具：微信开发者工具
开发语言：html+css+js+vue
参考文档：微信开放文档

本教程内容基于微信官方Weui开源代码，所以学习者仅需更改其中部分代码即可完成开发（等同于不需要理解汽车的构造，但依旧可以驾驶至香格里拉）。即使是小白，也可以按照教程一步步按图索骥，搭建出属于自己的微信小程序

PS：所有网站链接、本小程序的开源代码以及本人个人微信号都将附在文末，欢迎查询添加

1. 环境搭建

工欲善其事必先利其器，步骤（简述）如下

下载微信开发者工具
申请一个微信小程序账号
创建一个小程序，导入Weui代码

*1.* 下载安装微信开发者工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

*1.2.* 注册一个微信小程序账号

https://mp.weixin.qq.com/wxopen/waregister?action=step1

注册完成后，请按照网页指示一步步完成微信小程序信息填写

*1.3.* 创建一个小程序，并导入已有的Weui模板

官网：https://weui.io/下载链接：https://github.com/Tencent/weui-wxss/

1.3.1 从github上将Weui文件下载到本地并解压

1.3.2 打开微信开发者工具并将Weui文件导入其中

2. 各文件简单讲解

学过前端的应该对此比较熟悉了，没有学过的小白可以选择性的了解一下。如果想直接开搞，可跳过本章内容

操作不同的文件，可改变页面的显示以及一些功能，细列如下

index.wxml -- 更改页面里的文字内容
index.js -- 更改页面里的一些操作（如下拉刷新、调用api）
APP.json -- 更改主题颜色
app.js -- 更改页面导航等

PS：之所以没有涉及css，是因为Weui官方已经设置好了相应的class

3.开发一款美女图册

接下来就是实操了，跳过第二章的小伙伴们可以动手了

3.1 修改页眉

打开app.json文件
ctrl+f 搜寻navigationBarTitleText
修改其后内容

3.2 修改标题

打开Examples文件夹下的index.wxml文件
找到图中位置，修改相应内容

修改之后点击保存，微信开发者工具便会自动刷新预览，如要手机预览，可以按下图示操作

3.3 添加美女

打开index.js文件
按图中修改相应代码，即可添加（注意保存）

打开index.wxml文件
修改此处代码（实现key-value调用，主要是为了解决中文名的文件无法被打开的问题）

<navigator url="{{page.url}}/{{page.url}}" class="weui-cell weui-cell_access">
<view class="weui-cell__bd">{{page.name}}</view>
小白也可以开发微信小程序（入门篇）-第12张图片-90博客网

3.4 填充下拉页面内容

删除掉Examples里除index开头的所有文件（先仅留一个）
将仅留的这个改名为 intro-tong
将其内的所有文件都改名为intro-tong

打开 intro-tong.wxml 文件
删掉全部代码，复制粘贴下列代码

<view class="page" data-weui-theme="{{theme}}">
<view class="page__hd">
<view class="page__title">简介</view>
<text>\n</text>
<view class="page__desc">佟丽娅，1983年8月8日出生于新疆伊犁察布查尔，中国内地影视女演员、舞者。 2006年，佟丽娅因出演情感剧《新不了情》而踏入演艺圈。2008年，她因在古装剧《母仪天下》中饰演赵飞燕而崭露头角。 2011年开始，佟丽娅凭借穿越剧《宫锁心玉》、爱情剧《北京爱情故事》获得更多关注</view>
</view>
<view class="page__bd">
<view class="weui-article">
<view class="weui-article__section">
<view class="weui-article__section">
<view class="weui-article__p">
<image class="weui-article__img" show-menu-by-longpress="true" src="https://i.loli.net/2020/05/18/BJPbAiHzECNMStu.jpg" mode="aspectFit" style="height: 180px" />
</view>
</view>
</view>
</view>
</view>
小白也可以开发微信小程序（入门篇）-第14张图片-90博客网

按图示修改文字及图片，特别说明：src= 后面跟的是图片链接，图片可上传到免费云（https://sm.ms/）。更改完intro-tong文件后，复制3次intro-tong文件夹，并依次改名为img-tong、works-tong、secrets-tong，并按上述方法依次更改。至此女神佟丽娅的界面便完成了，下面就可以提交代码等待官方审核了

相关影片资源迅雷下载推荐
一分钟让你了解什么是web开发
现如今，有越来越多的小伙伴，进入IT行业，从事web开发工作。那么今天，我们一起来了解下什么是web开发。随着近年来，互联网技术的飞速发展，再加上移动端应用的突飞猛进，可以说真正让web站在时代的风口，在飞速前 ...
网站建设,一分钟让你了解什么是web开发