之前有用过微信小程序原生开发，后来面试时候都会问uniapp，最近有空有研究下uniapp，项目0-1开发流程笔记，主要内容如下，中间可能会有修改。
一 创建vue2项目并打包成微信小程序，发布到体验版本
1. 创建项目
文件-新建-项目，选一个你想要的模版或者不选
2. 开发页面
- 项目配置
- 写一个首页布局
<template>
<view class="content">
<view class="sl-Card">
<view class="sl-Card-top">
<text></text>
</view>
<view class="history">
<view class="history-card">
<text></text>
<br>
</view>
<view class="history-card-box">
<view class="history-card2">
<text></text>
</view>
<view class="history-card2" style="margin-top: 15upx;">
<text></text>
</view>
</view>
</view>
<!-- <view class="title">
</view> -->
<view class="Incentive">
<view class="Incentive-title">
分类
</view>
</view>
<view class="card-title">
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
},
onLoad() {
},
methods: {}
};
</script>
<style lang="scss" scoped>
.content {
text-align: center;
width: 100vw;
height: 80vh;
color: #a2a2a2;
.sl-Card {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20upx;
// margin-top: 20vh;
.sl-Card-top {
height: 300upx;
}
.Incentive {
margin-bottom: 40upx;
width: 95vw;
height: 500upx;
box-shadow: 3upx 0 18upx -5upx rgba(164, 161, 161, 0.5);
border-radius: 15upx 15upx 15upx;
}
.history {
width: 94vw;
display: flex;
justify-content: space-between;
margin-bottom: 20upx;
.history-card {
width: 43vw;
height: 300upx;
box-shadow: 3upx 0 18upx -5upx rgba(164, 161, 161, 0.5);
border-radius: 30upx 0upx 25upx 0upx;
}
.history-card-box {
.history-card2 {
width: 48vw;
height: 140upx;
box-shadow: 3upx 0 18upx -5upx rgba(164, 161, 161, 0.5);
border-radius: 25upx 0upx 0upx 0upx;
}
}
}
.title {
width: 90vw;
height: 400upx;
box-shadow: 3px 0 18px -5px rgba(164, 161, 161, 0.5);
border-radius: 15upx;
// display: flex;
// justify-content: center;
// flex-direction: column;
// align-items: center;
}
.card-title {}
}
}
</style>
3. 打包成微信小程序
- 打开微信开发工具，打开安全设置中服务端口
- 之后就可以把HBuilderX项目运行到微信开发工具（会自动打开微信开发工具，上传体验版本）
4. 发布成微信小程序体验版本
-上传代码成功后登陆微信公众平台https://mp.weixin.qq.com/
-找到版本可管理->开发版本->点击生成体验码
-只有体验成员才能使用
其他配置
- 一套代码适配所有平台
二 开发遇到的问题
1. 旧项目想直接运行到微信工具报错 找不到app.json文件
[ app.json 文件内容错误] app.json: 在项目目录未找到 app.json文章来源：https://www.toymoban.com/news/detail-856317.html
解决方法：找到project.config.json文件，添加已下代码，重新运行就可以了文章来源地址https://www.toymoban.com/news/detail-856317.html
"miniprogramRoot": "unpackage/dist/dev/mp-weixin/"
带更新… …
到了这里，关于uniapp开发笔记----发布成微信小程序体验版本的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
