uni-app 结合vue开发微信小程序完整代码

### 使用 Uni-app 和 Vue 开发微信小程序的完整示例 #### 项目结构概述 创建一个基于 `uni-app` 的微信小程序项目，其文件夹结构通常如下： ``` my-project/ ├── common/ # 存放公共组件或函数 ├── components/ # 组件目录 ├── pages/ # 页面目录 │ ├── index/ │ └── index.vue # 首页页面 │ └── logs/ │ └── logs.vue # 日志页面 ├── static/ # 资源文件（图片、字体等） └── App.vue # 应用入口文件 ``` #### 主要代码实现 ##### 1. **App.vue** 这是应用的根组件，在这里可以设置全局样式和其他初始化逻辑。 ```vue <template> <view class="content"> <!-- 这里放置全局布局 --> <router-view></router-view> </view> </template> <script> export default { onLaunch() { console.log('App Launch'); }, onShow() { console.log('App Show'); } }; </script> <style scoped> .content { display: flex; justify-content: center; align-items: center; } </style> ``` ##### 2. **index/index.vue** 首页是一个简单的欢迎界面，展示如何调用微信登录接口获取用户的 openid 并显示出来。 ```vue <template> <view class="container"> <button type="primary" @click="login">点击登录</button> <text v-if="openid">{{ '您的 OpenID 是:' + openid }}</text> </view> </template> <script> import { request } from '@dcloudio/uni-api'; const appId = "你的appid"; const appSecret = "你的秘钥"; export default { data() { return { openid: '' }; }, methods: { async login() { try { const resCode = await uni.login(); const response = await request({ url: `https://api.weixin.qq.com/sns/jscode2session`, method: 'GET', data: { appid: appId, secret: appSecret, js_code: resCode.code, grant_type: 'authorization_code' } }); this.openid = response.data.openid; } catch (error) { console.error(error); } } } }; </script> <style lang="scss" scoped> .container { padding-top: 50px; button { margin-bottom: 20px; } text { font-size: large; } } </style> ``` 上述代码展示了通过 `uni.request()` 发起网络请求来交换 session_key 及 openid[^3]。注意这里的 `appId` 和 `appSecret` 需要用实际申请的小程序凭证替换掉。 #### 构建与发布流程 完成编码之后，在 HBuilderX 中可以通过菜单栏中的“发行 -> 小程序-微信”选项编译成适合微信环境运行的应用包，并将其部署到微信公众平台上测试和上线[^1]。