【微信小程序开发】从0-1注册、下载、安装、开发保姆篇教程（附Demo源码）

更多相关内容可查看

前期准备

要有前端开发基础，已安装NodeJS，若未安装请参考NodeJS安装并生成Vue脚手架(保姆级)

可参考小程序开发官方文档进行学习，本文也是参考官方文档总结而来

附Demo地址：https://gitee.com/its-a-little-bad/wechat-d.git

注册登陆

已经注册过的可以跳过这部分，进入微信公众平台注册，选择小程序即可

进行邮箱注册以及一系列的信息填入，这里选择个人，即可注册完成

---

下载安装

根据自己的操作系统下载对应的安装包进行安装即可（我的是64位）：微信开发者工具下载地址

下载完安装包双击解压无脑下一步即可，微信扫码打开，即可进入如下页面

---

创建项目

进入刚才注册页面，找到对应的AppID

点击+号创建项目，填入自己的AppID即可，点击确定

如下页面为已创建好的小程序，点击编译即可在左侧预览界面看到界面

如果大家看着别扭，这里有个小技巧可以把预览界面放到右边，视图--外观--将模拟器移到右侧

---

项目结构

一个pages相当于一个页面，一个页面有如下四个文件

• .json 后缀的 JSON 配置文件，静态配置
• .wxml 后缀的 WXML 模板文件，类似于html文件
• .wxss 后缀的 WXSS 样式文件，类似于css文件
• .js 后缀的 JS 脚本逻辑文件，js文件，写逻辑的

这里就不具体展开去描述了，有vue的基础应该能大概明白每个文件的作用

├── app.js     # 小程序的逻辑文件
├── app.json   # 小程序的配置文件
├── app.wxss   # 全局公共样式文件
├── pages      # 存放小程序的各个页面
│   ├── index  # index页面
│   │   ├── index.js     # 页面逻辑
│   │   ├── index.wxml   # 页面结构
│   │   └── index.wxss   # 页面样式表
│   └── logs   # logs页面
│       ├── logs.js      # 页面逻辑
│       ├── logs.json    # 页面配置
│       ├── logs.wxml    # 页面结构
│       └── logs.wxss    # 页面样式表
├── project.config.json
└── utils
    └── util.js

---

版本管理

我这里因为是自己私下玩，还是用的git去管理的

• 在命令窗口中输入：git init
• 在命令窗口中输入：git remote add origin 你的仓库地址
• 在命令窗口中输入：git pull origin master
• 在命令窗口中输入：git add .
• 在命令窗口中输入：git commit -m “提交项目”
• 在命令窗口中输入：git push origin master

在版本管理可查看对应信息

---

程序页面

微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。

紧接着通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径:

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ]
}

这个配置说明项目定义了两个页面，分别位于 pages/index/index 和 pages/logs/logs。而写在 pages 字段的第一个页面就是这个小程序的首页（打开小程序看到的第一个页面）。

于是微信客户端就把首页的代码装载进来，通过小程序底层的一些机制，就可以渲染出这个首页。

小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行:

App({
  onLaunch: function () {
    // 小程序启动之后 触发
  }
})

你可以观察到 pages/logs/logs 下其实是包括了4种文件的，微信客户端会先根据logs.json配置生成一个界面，顶部的颜色和文字你都可以在这个 json 文件里边定义好。紧接着客户端就会装载这个页面的 WXML 结构和 WXSS 样式。最后客户端会装载 logs.js，你可以看到 logs.js 的大体内容就是:

Page({
  data: { // 参与页面渲染的数据
    logs: []
  },
  onLoad: function () {
    // 页面渲染后 执行
  }
})

Page 是一个页面构造器，这个构造器就生成了一个页面。在生成页面的时候，小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构，于是就得到了你看到的小程序的样子。

在渲染完界面之后，页面实例就会收到一个 onLoad 的回调，你可以在这个回调处理你的逻辑。

简单示例

<!-- This is our View -->
<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>

// This is our App Service.
// This is our data.
var helloData = {
  name: 'WeChat'
}

// Register a Page.
Page({
  data: helloData,
  changeName: function (e) {
    // sent data change to view
    this.setData({
      name: 'MINA'
    })
  }
})

看这个代码其实是跟vue2很类似的，而且也能很直观的在编辑器中看到想要的效果

---

生命周期

以下为常用的app.js的生命周期

属性	类型	说明
onLaunch	function	生命周期回调——监听小程序初始化
onShow	function	生命周期回调——监听小程序启动或切前台
onHide	function	生命周期回调——监听小程序切后台
onError	function	错误监听函数
onPageNotFound	function	页面不存在监听函数
onUnhandledRejection	function	未处理的 Promise 拒绝事件监听函数
onThemeChange	function	监听系统主题变化
其他	any	开发者可以添加任意的函数或数据变量到 Object 参数中，用 this 可以访问

---

新增页面

这里带大家一起创建一个页面，也为了大家在后续的开发里更好的下手

1.进入app.json 在第一个pages数组里面指定生成页面文件路径即可生动创建，我这里把我新建的login页面放到最前面来演示

2.给小程序当前页面设置导航栏（index.json为例：修改背景，字体颜色）

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#000000",   //修改背景为黑色
  "navigationBarTextStyle": "white",  //修改字体为白色
  "navigationBarTitleText": "登陆页面", //修改标题
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

若导航栏不显示，检查一下app.json是否隐藏了标题栏如下，改为"navigationStyle": "default"即可

注意：如果你想要显示导航栏，你可以尝试以下两种解决方案

• 更改app.json的”renderer”的值。如果你的应用不需要使用”skyline”渲染器，你可以将其更改为其他值，或者完全删除”renderer”选项。然后，你可以将”navigationStyle”设置为”default”，以显示默认的导航栏。
• 使用自定义导航栏。如果你的应用必须使用”skyline”渲染器，那么你需要创建一个自定义导航栏。你可以在页面的.wxml文件中添加一个自定义的组件，然后在.wxss文件中为它添加样式。这样，虽然你不能使用默认的导航栏，但你可以创建一个看起来和默认导航栏非常相似的自定义导航栏。

3.给小程序设置拖把栏（全局配置）

记得照片自己导入一下哦，导入到你自己写的路径下就行

代码如下：

{
  "pages": [
    "pages/login/login",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationStyle": "default"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "static/tabBar/1.png",
      "selectedIconPath": "static/tabBar/2.png"
    },
    {
      "pagePath": "pages/login/login",
      "text": "登录",
      "iconPath": "static/tabBar/2.png",
      "selectedIconPath": "static/tabBar/1.png"
    },
    {
      "pagePath": "pages/logs/logs",
      "text": "日志",
      "iconPath": "static/tabBar/3.png",
      "selectedIconPath": "static/tabBar/2.png"
    }
  ]
  },
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

4. 给小程序设置按钮触摸事件（index.wxml为例）

wxml文件

    <view class="btn" bindtap="handleCm">
        <image src="/static/tabBar/1.png" class="btn-icon" />
        <text>点击事件</text>
    </view>

wxss文件

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1aad19;
  color: white;
  padding: 10px;
  border-radius: 4px;
}

.btn-icon {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

js文件

  //自定义点击事件
  handleCm(){
    this.setData({
      motto: "唱跳Rap"
    })
  }

功能：点击按钮会将HelloWorld变为唱跳Rap

---

功能实现

如果你是拉取的Demo代码，记得自己往static/images中导入图片

功能：要求输入一串1010110110011（二进制）可以解析成汉字

1. 设计界面
首先，在微信小程序的 wxml 文件中设计一个界面，包括输入框用于输入二进制数字和一个按钮来触发解析操作。例如：

<!-- index.wxml -->
<!-- index.wxml -->
<view class="container">
  <view class="navigation-bar">
    <!-- 导航栏的内容 -->
    <text class="navbar-title">美化页面</text>
  </view>


  <view class="swiper-container">
    <swiper class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
      <block wx:for="{{imgUrls}}" wx:key="index">
        <swiper-item>
          <image src="{{item}}" class="slide-image" mode="aspectFill"></image>
        </swiper-item>
      </block>
    </swiper>
  </view>

  <view class="input-container">
    <input class="input" placeholder="请输入二进制数字" bindinput="inputChange" />
    <button class="button" bindtap="parseBinary">解析成汉字</button>
  </view>

  <view class="result">{{ result }}</view>
</view>

2. 编写逻辑处理的 JavaScript 代码

在 js 文件中编写逻辑代码，包括处理用户输入和二进制解析的功能。

// index.js
Page({
  data: {
    imgUrls: [
      '/static/images/a.png',
      '/static/images/b.png',
      '/static/images/c.png'
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000,

    binaryInput: '', // 用户输入的二进制字符串
    result: '', // 解析后的汉字结果
  },

  // 输入框内容改变时触发
  inputChange: function(e) {
    this.setData({
      binaryInput: e.detail.value.trim(), // 获取用户输入并去除首尾空格
    });
  },

  // 解析二进制为汉字
  parseBinary: function() {
    let binaryInput = this.data.binaryInput;

    // 检查输入是否为合法的二进制字符串（只包含 0 和 1）
    if (!/^[01]+$/.test(binaryInput)) {
      wx.showToast({
        title: '请输入有效的二进制数字',
        icon: 'none',
        duration: 2000
      });
      return;
    }

    // 调用解析函数，这里假设有一个 parseBinaryToChinese 的函数来实现解析
    let result = parseBinaryToChinese(binaryInput);
    
    console.log('aaaaa');
    // 更新页面显示结果
    this.setData({
      result: result,
    });
    console.log('bbbb');
  }
});
// 解析二进制字符串为汉字的函数
function parseBinaryToChinese(binaryString) {
  // 拆分成每8位一组
  let chunks = binaryString.match(/.{8}/g);

  // 将每组二进制转换成十进制数再转换成字符
  let result = chunks.map(chunk => String.fromCharCode(parseInt(chunk, 2))).join('');

  return result;
}

3. CSS 样式（可选）

根据需要可以添加样式来美化界面，例如在 wxss 文件中：

/* index.wxss */
.container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 100vh; /* 设置容器高度为整个视口高度，确保页面铺满 */
}

.navigation-bar {
  width: 100%;
  background-color: #333; /* 导航栏背景色 */
  color: #fff; /* 导航栏文字颜色 */
  text-align: center;
  position: fixed; /* 导航栏固定在页面顶部 */
  top: 0;
  z-index: 1000; /* 确保导航栏在页面顶部 */
}

.swiper-container {
  width: 100%;
  overflow: hidden; 
  margin-top: 0; /* 取消轮播图容器的顶部间距 */
}

.swiper {
  width: 100%;
  height: 200px; /* 调整轮播图高度 */
}

.slide-image {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.result {
  margin-top: 20px; /* 调整结果显示区域与输入框区域的间距 */
  text-align: center;
}

.input-container {
  width: 80%;
  display: flex;
  margin-top: 20px;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.input {
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
  font-size: 14px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.button {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: #1aad19;
  color: #fff;
  font-size: 16px;
  text-align: center;
  border-radius: 5px;
}

效果如图，如果有别的算法需求，换一下如图这个function即可，然后在优化一下页面

---

本篇小结

本篇带大家从下载安装到简单的玩耍，相信大家看着文档或者当今发达的gpt已经可以开始开发自己的页面了，比如实现一些轮播图，进行微信扫码等等功能都是开箱即用的内容，具体语法千千万，想用什么实现什么页面还需仔细阅读官方文档