微信小程序入门开发教程

最新推荐文章于 2024-08-07 21:00:00 发布

湖大李桂桂

最新推荐文章于 2024-08-07 21:00:00 发布

阅读量1.2k

点赞数 2

分类专栏：微信小程序开发

本文链接：https://blog.csdn.net/qq_36017609/article/details/103544591

版权

微信小程序开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

欢迎关注我的微信公众号“人小路远”哦，在这里我将会记录自己日常学习的点滴收获与大家分享，以后也可能会定期记录一下自己在外读博的所见所闻，希望大家喜欢，感谢支持！

逐步更新中，根据微信公众平台官方提供的开发文档、开发工具、设计指南和小程序体验DEMO，从零开始一步一步陪大家一起入门。

1、小程序开发总体流程

如官网图所示，四步即达简单易懂。

1.1、点击前往注册，即可注册微信小程序并与个人微信进行绑定。

1.2、填写相关信息。

1.3、下载开发者工具，并对照参考开发文档即可进行小程序的开发和调试。

1.4、小程序版本分为开发板、体验版和正式版。其中正式版需提交审核才可发布（发布后用户通过搜索可以直接访问），开发版（开发过程中真机调试使用）和体验版（15人小规模测试使用，需要管理员邀请才可扫描二维码进行体验）则无需提交审核。

2、开发小程序

官网下载开发者工具，微信扫码登录后新建小程序项目，并输入之前注册的小程序的AppID（微信公众平台小程序-设置-基本设置-帐号信息-AppID复制）即可得到官方预设的示例程序。根据项目需求根据官方api文档进行开发即可，本文只是给大家展示微信小程序开发流程，暂不进行演示。

2.1、代码结构

2.1.1、.json 后缀的 JSON 配置文件（静态配置文件）

2.1.2、.wxml 后缀的 WXML 模板文件（相当于HTML）

2.1.3、.wxss 后缀的 WXSS 样式文件（相当于CSS）

2.1.4、.js 后缀的 JS 脚本逻辑文件（相当于JS）

2.2、代码版本管理

微信有自己的代码托管平台，类似于github。通过开发者工具页面右上角的版本管理即可进行代码托管。

3、提交审核和发布

代码调试完成后点击开发工具页面右上角的上传即可上传为体验版，体验版本测试无误后在微信公共平台小程序-管理-公共管理-项目管理中将体验版提交审核。一年只有一次加急机会，一般审核周期为1-7天。审核通过后用户即可在微信中搜索小程序名称进行使用。

4、项目实战

回忆版，如果有疏漏或错误敬请指正。

4.1、项目需求

诗词地图可视化

4.2、项目实现

4.2.1、注册域名并备案

4.2.1.1、购买域名并备案

项目数据全部在阿里云服务器的数据库里，故不使用腾讯云服务。因涉及到前后端交互，且微信只支持服务器域名https的形式进行传值，所以需要申请域名。腾讯云阿里云等网络服务提供商均提供域名购买服务和快速备案（需要一定时间），此处以阿里云为例。阿里云万网搜索喜欢的域名并进行购买和备案。

4.2.1.2、选择控制台中的“云解析DNS”选择A类将域名解析至个人服务器的外网IPv4地址，TTL设置为10分钟（TTL相关知识详见参考文档域名解析TTL是什么意思 TTL值设置为多少合适？）。

4.2.1.3、服务器实例添加安全策略开放80和443端口以及数据库需要的端口以便访问，此处以443为例。

添加安全组规则-入方向-Https(443)，授权地址0.0.0.0/0即所有ip都可以访问

4.2.1.4、为域名绑定SSL证书（视项目需求而定，此处使用免费版本）。该系统用nodejs写的后端，所以此处以nodejs配置为例，使其支持https访问。参考文章Nodejs配置Https服务

证书申请完成签发后下载Nginx版本至服务器，把key和pem放在自己nodejs的项目文件夹里，并在代码里进行引用即可完成配置。但一定注意文件位置要写对。

let express = require("express");
let http = require("http");
let https = require("https");
let fs = require("fs");
// Configuare https
const httpsOption = {
    key : fs.readFileSync("./https/xxxxxxxxxxxx.key"),
    cert: fs.readFileSync("./https/xxxxxxxxxxxx.pem")
}
// Create service
let app = express();
http.createServer(app).listen(80);
https.createServer(httpsOption, app).listen(443);

4.2.2、配置小程序的服务器域名

微信公众平台小程序-开发-开发设置-服务器域名，将刚才配置的域名粘贴进去即可，socket为自动生成，一般用不到无需更改。