0基础搭建小程序

最终成品预览你将做出一个拥有以下页面的小程序首页展示店铺列表带图片、评分、地址。详情页点击店铺进入查看详细介绍和所有用户评论。发布页用户可以拍照、写文字、打分发布一条新的点评。我的页显示登录用户的信息。第一阶段准备工作15分钟目标拥有开发账号和工具。第1步注册微信小程序账号打开 微信公众平台。点击“立即注册”选择“小程序”。填写邮箱、密码注意不能使用已绑定公众号/个人微信号的邮箱。激活邮箱选择“个人”主体类型个人主体无法开通微信支付但做点评功能完全够用。第2步安装开发者工具访问 微信开发者工具下载页。下载Windows 64位稳定版如果你是Mac就选Mac版。一路默认安装即可。第二阶段创建项目5分钟目标搭建空壳连接云端数据库。第3步新建云开发模板打开刚安装的“微信开发者工具”。扫码登录。点击“”号新建项目。项目名称随便填如“我的点评”。目录选一个你电脑上的空文件夹。AppID去公众平台 - 开发 - 开发管理 - 开发设置里复制AppID不是AppSecret。开发模式选“小程序”。后端服务一定要选“微信云开发”这是关键免服务器。模板选择“空白模板”先不选复杂的我们后面导入。点击创建。第4步开通云环境顶部工具栏找到“云开发”​ 按钮点击。开通环境套餐选择“按量付费”新用户免费额度足够玩很久不会扣费。环境名称填cloud1方便跟教程同步。第三阶段核心代码搭建40分钟目标复制粘贴代码实现点评功能。第5步配置云数据库存数据的地方在开发者工具顶部点击“云开发”。进入“数据库”​ -“集合”​ -“”添加集合。我们需要建两个表集合集合1名称shops存放店铺信息权限设置为“所有用户可读仅创建者可读写”。集合2名称reviews存放用户评论权限设置为“所有用户可读仅创建者可读写”。第6步导入初始店铺数据点击shops集合 -“导入”。把下面的代码复制到记事本保存为shops.json然后导入。{_id:shop1,name:老王麻辣烫,address:科技园南区10栋,score:4.8,image:https://images.unsplash.com/photo-1555126634-323283e090fa?w500} {_id:shop2,name:深夜食堂,address:大学城步行街,score:4.5,image:https://images.unsplash.com/photo-1552566626-52f8b828add9?w500}第7步编写前端页面复制粘贴区回到开发者工具左边的“编辑器”。修改app.json这是路由配置文件替换全部内容为{ pages: [ pages/index/index, pages/detail/detail, pages/post/post, pages/my/my ], window: { navigationBarTitleText: 大众点评Demo }, tabBar: { list: [ { pagePath: pages/index/index, text: 首页 }, { pagePath: pages/post/post, text: 点评 }, { pagePath: pages/my/my, text: 我的 } ] } }此时会报错因为文件夹不存在别慌下一步解决。创建文件夹和文件在pages文件夹上右键 - 新建 Page。输入index回车自动生成首页。输入detail回车详情页。输入post回车发布页。输入my回车我的页。编写首页 (pages/index/index.wxml)清空原内容粘贴view classcontainer block wx:for{{shops}} wx:key_id view classcard bindtapgoDetail data-id{{item._id}} image src{{item.image}} modeaspectFill/image view classinfo text classtitle{{item.name}}/text text评分: {{item.score}}/text text地址: {{item.address}}/text /view /view /block /view编写首页逻辑 (pages/index/index.js)清空原内容粘贴注意修改环境ID为你的环境ID在云开发控制台概览里看const db wx.cloud.database() Page({ data: { shops: [] }, onLoad() { db.collection(shops).get().then(res { this.setData({ shops: res.data }) }) }, goDetail(e) { wx.navigateTo({ url: /pages/detail/detail?id e.currentTarget.dataset.id }) } })编写首页样式 (pages/index/index.wxss).card { display: flex; padding: 20rpx; border-bottom: 1rpx solid #eee; } .card image { width: 200rpx; height: 150rpx; border-radius: 8rpx; } .info { margin-left: 20rpx; display: flex; flex-direction: column; } .title { font-size: 32rpx; font-weight: bold; }第8步实现详情页和点评发布核心功能由于篇幅限制这里只给你最关键的post页面代码发布点评编辑pages/post/post.wxmlview classcontainer textarea placeholder写下你的评价... bindinputonInput/textarea button bindtapsubmit提交点评/button /view编辑pages/post/post.jsconst db wx.cloud.database() Page({ data: { content: }, onInput(e) { this.setData({ content: e.detail.value }) }, submit() { db.collection(reviews).add({ data: { content: this.data.content, createTime: new Date() } }).then(() { wx.showToast({ title: 发布成功 }) this.setData({ content: }) }) } })第四阶段运行与真机测试5分钟第9步编译运行点击工具栏的“编译”。你应该能看到两个店铺卡片。点击“点评”Tab输入文字点击提交。去云开发控制台的“数据库” - “reviews”​ 里刷新一下如果能看到刚才提交的数据恭喜你你已经完成了最核心的后端交互 给0基础同学的重要提示不要死记代码你现在的重点是理解流程页面 - 点击 - JS逻辑 - 数据库。报错怎么办90%的错误是因为AppID填错、环境ID填错、标点符号用了中文全角必须用英文半角。进阶方向现在的UI很丑你可以去搜“WeUI for 小程序”下载它的代码片段把好看的按钮和列表复制过来替换掉现在的view。