uniapp简单小程序

uniapp简单小程序开发指南

环境准备
安装HBuilderX（官方IDE），确保已配置微信开发者工具路径。创建项目时选择“uni-app”模板，模板类型建议使用“默认模板”或“hello uni-app”示例。

项目结构

• pages：存放页面，每个页面包含.vue文件
• static：静态资源（图片、字体等）
• manifest.json：应用配置（AppID、名称等）
• pages.json：路由与页面样式配置

示例代码：首页

<template>
  <view class="content">
    <image src="/static/logo.png" class="logo"></image>
    <button @click="navigateToDemo">跳转示例页</button>
  </view>
</template>

<script>
export default {
  methods: {
    navigateToDemo() {
      uni.navigateTo({ url: '/pages/demo/demo' });
    }
  }
}
</script>

<style>
.content { text-align: center; }
.logo { width: 200rpx; height: 200rpx; }
</style>

路由配置
在pages.json中注册页面：

{
  "pages": [
    { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页" } },
    { "path": "pages/demo/demo", "style": { "navigationBarTitleText": "示例页" } }
  ]
}

调试与发布
通过HBuilderX运行到微信开发者工具，真机调试需扫码。发布时在微信公众平台提交审核，注意配置合法域名。

常见问题

• 图片路径：建议使用/static/绝对路径
• 样式隔离：使用rpx适配不同屏幕
• API调用：uni.request需配置HTTPS域名

扩展功能

• 条件编译：通过#ifdef MP-WEIXIN区分平台代码
• 插件市场：使用uni_modules引入第三方组件
• 云开发：集成微信云函数或uniCloud