更新记录

1.0.0（2025-11-12） 下载此版本

1.旅游轮播图 2.导航 3.景点列表

平台兼容性

uni-app(3.6.14)

# First Extension For HBuilderX

开发文档参考：https://hx.dcloud.net.cn

基础使用（核心操作 4步走）

（1）新建 UniApp 项目

• 点击顶部菜单「文件」→「新建」→「项目」；

• 左侧选「UniApp」，模板选「默认模板」（新手推荐）；

• 填写项目名称（如 my-uniapp）、选择存储路径（别放 C 盘！），点击「创建」。

  效果：左侧「项目管理器」出现项目文件夹，包含 pages（页面）、static（静态资源）等核心目录。

• 下载插件并导入到my-uniapp项目中

（2）编写页面代码

• 打开

  pages/index/index.vue

  （默认首页），看到 3 个标签：

  • <template>：写页面结构（类似 HTML，用 <view> 代替 <div>）；
  • <script>：写逻辑（Vue 语法，如数据、方法）；
  • <style>：写样式（支持 CSS、Less、Scss）。

• 修改首页：

• 在 <script> 里导入插件 import ShimenTourismPass from @components/shimen-tourism-pass/shimen-tourism-pass.vue

• 在 <template> 里增加 <ShimenTourismPass>，保存（Ctrl+S）。

（3）运行到浏览器（快速预览）

• 点击顶部工具栏「运行」→「运行到浏览器」→「Chrome」（或其他浏览器）；
• 首次运行会自动编译，稍等几秒，浏览器会打开预览页面，看到刚才写的 “Hello 国际庄！”。

（4）运行到手机 / 模拟器（看真实效果）

• 微信小程序

  1. 先安装 微信开发者工具（选稳定版）；

     

  2. 修改manifst.json中的微信小程序appid,(注意：如果没有需要注册小程序，然后复制appid.）

  3. 在 HBuilderX 里点击「运行」→「运行到小程序模拟器」→「微信开发者工具」；

  4. 首次需在微信开发者工具里扫码登录，并在「设置」→「安全设置」中开启「服务端口」。