为什么要做小程序

去年开始接触小程序开发，当时接了一个企业网站的项目，客户说想要在微信里也能看到。于是我就开始了小程序的学习之路。

选择uni-app是因为它一套代码可以编译成小程序、APP、H5，性价比很高。

第一步：环境搭建

开发小程序需要准备这些工具：

HBuilderX 开发工具，这是uni-app官方推荐的IDE

微信开发者工具，用来预览和调试小程序

一个微信小程序账号，去微信公众平台注册

注册小程序账号要注意，如果是个人只能做个人性质的小程序，不能做企业展示。这块我一开始没注意，踩了坑。

第二步：创建项目

打开HBuilderX，点击文件-新建-项目，选择uni-app模板，输入项目名称，选择默认模板就可以了。

创建成功后可以看到项目结构：

pages文件夹存放页面文件

static文件夹存放图片等静态资源

App.vue是应用的入口文件

pages.json是页面配置文件

manifest.json是应用配置文件

第三步：开发首页

首页我设计了一个个人作品集的风格，包含头像、个人介绍、技能标签、作品展示等模块。

布局用的是flex，这个在小程序里支持很好。颜色用了蓝紫渐变，看起来比较有科技感。

数据方面先用静态数据写死，后面再对接后台接口。

第四步：开发列表页和详情页

列表页用来展示文章列表，支持分类筛选。我用了scroll-view组件实现横向滚动。

详情页通过页面传参接收文章ID，然后请求对应的文章内容。

页面跳转用uni.navigateTo，注意要在pages.json里注册页面路径，否则会报错。

第五步：对接后台接口

后台用的是HKCMS，一个开源的PHP内容管理系统。它提供了现成的API接口，可以直接调用。

获取文章列表的接口：

/api/content/lists?catid=栏目ID&num=每页数量

获取文章详情的接口：

/api/content/detail?id=文章ID

在uni-app中用uni.request发起请求，拿到数据后渲染到页面上。

第六步：踩坑记录

开发过程中遇到了几个问题，记录一下：

图片不显示：本地图片在真机上不显示，改用网络图片或者用require引入就好了。

页面跳转失败：检查pages.json里有没有注册页面路径，注册后要重新运行项目。

样式不生效：小程序不支持部分CSS属性，比如某些伪类选择器。遇到这种情况可以换一种写法或者用组件模拟。

真机调试连不上：检查手机和电脑是否在同一网络，防火墙是否拦截了端口。

第七步：提交审核

开发完成后，在微信开发者工具里上传代码，然后在微信公众平台提交审核。

审核需要注意：个人小程序不能涉及企业信息，名称不能用公司名，内容不能有商业推广。

我第一次提交就被驳回了，因为小程序名称带了"科技"两个字，修改后才通过。

总结

整个开发过程大概花了两周时间，虽然是第一次做小程序，但uni-app的上手难度不高，有Vue基础的话很快就能适应。

这次经历让我掌握了小程序开发的全流程，从环境搭建、代码开发、到对接后台、提交审核，每一步都走了一遍。

后续我还会继续优化这个小程序，增加更多的功能模块，比如评论功能、搜索功能、个人中心等。

如果你也在学习小程序开发，欢迎一起交流。为什么要做小程序

去年开始接触小程序开发，当时接了一个企业网站的项目，客户说想要在微信里也能看到。于是我就开始了小程序的学习之路。

选择uni-app是因为它一套代码可以编译成小程序、APP、H5，性价比很高。

第一步：环境搭建

开发小程序需要准备这些工具：

HBuilderX 开发工具，这是uni-app官方推荐的IDE

微信开发者工具，用来预览和调试小程序

一个微信小程序账号，去微信公众平台注册

注册小程序账号要注意，如果是个人只能做个人性质的小程序，不能做企业展示。这块我一开始没注意，踩了坑。

第二步：创建项目

打开HBuilderX，点击文件-新建-项目，选择uni-app模板，输入项目名称，选择默认模板就可以了。

创建成功后可以看到项目结构：

pages文件夹存放页面文件

static文件夹存放图片等静态资源

App.vue是应用的入口文件

pages.json是页面配置文件

manifest.json是应用配置文件

第三步：开发首页

首页我设计了一个个人作品集的风格，包含头像、个人介绍、技能标签、作品展示等模块。

布局用的是flex，这个在小程序里支持很好。颜色用了蓝紫渐变，看起来比较有科技感。

数据方面先用静态数据写死，后面再对接后台接口。

第四步：开发列表页和详情页

列表页用来展示文章列表，支持分类筛选。我用了scroll-view组件实现横向滚动。

详情页通过页面传参接收文章ID，然后请求对应的文章内容。

页面跳转用uni.navigateTo，注意要在pages.json里注册页面路径，否则会报错。

第五步：对接后台接口

后台用的是HKCMS，一个开源的PHP内容管理系统。它提供了现成的API接口，可以直接调用。

获取文章列表的接口：

/api/content/lists?catid=栏目ID&num=每页数量

获取文章详情的接口：

/api/content/detail?id=文章ID

在uni-app中用uni.request发起请求，拿到数据后渲染到页面上。

第六步：踩坑记录

开发过程中遇到了几个问题，记录一下：

图片不显示：本地图片在真机上不显示，改用网络图片或者用require引入就好了。

页面跳转失败：检查pages.json里有没有注册页面路径，注册后要重新运行项目。

样式不生效：小程序不支持部分CSS属性，比如某些伪类选择器。遇到这种情况可以换一种写法或者用组件模拟。

真机调试连不上：检查手机和电脑是否在同一网络，防火墙是否拦截了端口。

第七步：提交审核

开发完成后，在微信开发者工具里上传代码，然后在微信公众平台提交审核。

审核需要注意：个人小程序不能涉及企业信息，名称不能用公司名，内容不能有商业推广。

我第一次提交就被驳回了，因为小程序名称带了"科技"两个字，修改后才通过。

总结

整个开发过程大概花了两周时间，虽然是第一次做小程序，但uni-app的上手难度不高，有Vue基础的话很快就能适应。

这次经历让我掌握了小程序开发的全流程，从环境搭建、代码开发、到对接后台、提交审核，每一步都走了一遍。

后续我还会继续优化这个小程序，增加更多的功能模块，比如评论功能、搜索功能、个人中心等。

如果你也在学习小程序开发，欢迎一起交流。