软件研发 --- hello world 项目 之 微信小程序 wxml

https://gitee.com/null_465_7266/wxml4hello

 

Hello World 微信小程序

一个简单的微信小程序示例项目，展示基本的小程序开发结构和功能。

项目特性

• ✨ 简洁的Hello World展示
• 🎨 美观的渐变色UI设计
• ⏰ 实时时间显示
• 🎲 随机问候语功能
• 👤 用户信息获取（兼容新旧API）
• 📱 响应式设计，适配不同屏幕

项目结构

├── app.js                 # 小程序入口文件
├── app.json              # 小程序全局配置
├── app.wxss              # 小程序全局样式
├── sitemap.json          # 搜索索引配置
├── project.config.json   # 项目配置文件
├── pages/                # 页面目录
│   └── index/           # 首页
│       ├── index.js     # 页面逻辑
│       ├── index.json   # 页面配置
│       ├── index.wxml   # 页面结构
│       └── index.wxss   # 页面样式
├── images/              # 图片资源目录
├── 部署方法手册.md        # 详细部署指南
└── README.md            # 项目说明

 

快速开始

1. 准备工作

• 注册微信小程序账号
• 下载并安装微信开发者工具
• 获取小程序AppID

2. 导入项目

1. 打开微信开发者工具
2. 选择"导入项目"
3. 选择本项目目录
4. 输入AppID（可使用测试号）
5. 点击导入

3. 配置项目

修改 project.config.json 中的AppID：

{
  "appid": "你的小程序AppID"
}

 

4. 运行项目

在微信开发者工具中即可预览和调试小程序

功能说明

主要功能

1. Hello World展示：显示经典的Hello World问候语
2. 时间显示：实时显示当前时间
3. 随机问候：点击按钮随机切换问候语
4. 用户信息：获取微信用户基本信息

技术特点

• 使用微信小程序原生开发
• 响应式布局设计
• 兼容新旧API（getUserProfile/getUserInfo）
• 现代化的UI设计

部署指南

详细的部署步骤请参考：部署方法手册.md

简要步骤

1. 本地开发调试
2. 上传代码到微信公众平台
3. 提交审核
4. 审核通过后发布上线

开发说明

页面结构

• app.js：应用程序入口，处理应用生命周期
• app.json：全局配置，包括页面路径、窗口样式等
• pages/index/：首页相关文件

样式设计

• 使用渐变色背景
• 卡片式布局
• 圆角按钮设计
• 阴影效果增强层次感

兼容性处理

代码中包含了对不同微信版本的兼容处理：

• 优先使用wx.getUserProfile（推荐）
• 降级使用wx.getUserInfo
• 支持旧版本的open-type方式

扩展建议

基于此项目，你可以继续开发：

• 添加更多页面和功能
• 集成后端API
• 添加数据存储功能
• 实现用户登录系统
• 添加分享功能

注意事项

1. AppID配置：记得替换为你自己的小程序AppID
2. 图片资源：将logo.png等图片放入images目录
3. 域名配置：如需网络请求，需在微信公众平台配置合法域名
4. 审核规范：发布前请确保符合微信小程序审核规范

技术支持

• 微信小程序官方文档
• 微信开放社区

许可证

MIT License

---

祝你开发愉快！ 🎉