HBuilder 创建的 Uui-App项目 如何发布到微信小程序

需提前准备的工具:HBuilder X 微信开发者工具

目录

一、微信小程序账号申请

二、在微信开发者工具中打开服务端口

三、 在HBuilder创建Uni-App项目,并与微信小程序开发工具进行交互预览测试

 四、 发布Uni-App项目

 五、 微信线上发布运行


一、微信小程序账号申请

登录微信小程序官网,注册/登录。

登录页面后,在左侧菜单找到开发管理并点击,打开后即可获取到AppID

二、在微信开发者工具中打开服务端口

  打开软件,点击右上角的齿轮"设置"图标,进入设置界面后,点击上方的"安全"选项卡,然后开启服务端口

三、 在HBuilder创建Uni-App项目,并与微信小程序开发工具进行交互预览测试

1、打开HBuilder,点击左上角的"文件"菜单,选择"新建项目",在弹出的对话框中,选择"Uui-App"项目模板,并输入项目的名称和保存路径,然后点击创建即可完成。

2、 在项目的根目录中,找到manifest.json文件,并打开它。这个文件是微信小程序的配置文件,可以设置小程序的一些基本信息,如appid、页面路由、导航栏样式等。

3、在HBuilder中点击菜单的"运行"->"运行到微信小程序模拟器",或者按下F5键,可以在HBuilder中预览小程序的效果。 (前置条件:微信小程序开发者工具已开启服务端口)

 四、 发布Uni-App项目

1、点击菜单中选择"发行"->"小程序-微信"将项目发布到"微信开发者工具"

2、 "微信开发者工具"中成功接收到且正常预览显示后,点击"上传"后,即可在小程序后台管理页面找到此上传的版本

 

 五、 微信线上发布运行

打开微信网页,配置服务器域名,也就是需要绑定接口需要是https协议(否则小程序无法发起请求)

1、点击"开发管理"->"开始配置"

2、扫码验证身份后,进行服务器的域名配置

 3、配置完成后,点击下方的“保存并提交”完成配置

 4、点击左侧菜单"管理"->"版本管理",找到提交的小程序版本,然后点击"提交审核",审核通过后,即可在"审核版本"中申请发布,完成最终的微信发布。

以上就是在HBuilder中创建Uui-App项目,并将开发项目发布到微信小程序的基本流程和步骤。具体的操作步骤可能与不同的版本和开发环境有所不同,建议根据具体的情况进行操作。

  • 8
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个简单的示例: ```html <template> <div class="uui-tabs"> <div class="uui-tabs-nav"> <div class="uui-tabs-nav-item" :class="{ active: activeTab === item.name }" v-for="item in tabs" :key="item.name" @click="changeTab(item)"> {{ item.label }} </div> </div> <div class="uui-tabs-content"> <slot></slot> </div> </div> </template> <script> export default { name: 'UUITabs', props: { value: { // 绑定选中的标签页名称 type: String, default: '' } }, data() { return { tabs: [], // 标签页列表 activeTab: this.value // 当前选中的标签页名称 } }, watch: { value(newValue) { // 监听 value 的变化 this.activeTab = newValue } }, methods: { changeTab(tab) { // 切换标签页 this.activeTab = tab.name this.$emit('change', tab) } } } </script> ``` 使用示例: ```html <template> <div> <uui-tabs v-model="activeTab" @change="changeTab"> <uui-tabs-item label="配置管理" name="tab-1"> <p>你选择了配置管理</p> </uui-tabs-item> <uui-tabs-item label="角色管理" name="tab-2"> <p>你选择了角色管理</p> </uui-tabs-item> <uui-tabs-item label="啊啊哦哦" name="tab-3"> <p>你选择了啊啊哦哦</p> </uui-tabs-item> </uui-tabs> <p>当前选中的标签页是:{{ activeTab }}</p> </div> </template> <script> import UUITabs from './UUITabs.vue' import UUITabsItem from './UUITabsItem.vue' export default { components: { UUITabs, UUITabsItem }, data() { return { activeTab: 'tab-1' } }, methods: { changeTab(tab) { console.log(tab.label, '被选中了') } } } </script> ``` 注意:上面的示例代码仅供参考,具体实现方式可能因项目需求而异。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值