【2020云开发+源码】30分钟创建并上线微信小程序实战项目 | 零成本 | 云数据库 | 云函数 上

简介: 1、项目介绍2、创建项目、云开发初始化、页面初始化


image.png


image.png



点击网址查看原视频

https://blog.csdn.net/shine_a/article/details/104770349?spm=1001.2014.3001.5502



一、项目介绍


先来看一下最后的效果,有三个页面:首页、记录、我的,


先在我的页面,点击登录按钮,登录进来,会展示用户的微信头像和微信昵称


接下来来到首页,点击加减按钮,记录页面会同步产生点击的日志。我们课程结束后,在手机上面运行的结果就是这样的


image.png


二、创建项目、云开发初始化、页面初始化


1、创建项目


接下来我们来创建项目,先来看看什么是云开发


可以理解为微信官方给我们的一个免费服务器,并且非常贴心的帮我们部署好了小程序的环境,将服务器的一些功能,比如数据库的增删改查都封装成了接口,我们操作数据库只需要调用他们封装好的接口就可以,非常的简单


创建云开发项目的话,需要先注册一个小程序账号

点击查看注册账号演示


我们登陆到小程序账号中,拿到小程序的唯一标识AppId,创建云开发项目必须要有AppID


接下来我们来到微信开发者工具中,创建一个新的小程序项目,不要选择云开发选项,会给我们创建许多我们用不到的模板。选择这个不使用云开发,然后我们自己去配置云开发环境



image.png



项目创建好了之后,点击云开发按钮,开通一下云开发功能


image.png


开通完成之后,我们会拿到云开发环境的id,这个id是唯一的,用来标识你的这个开发环境,后面我们会用到id


image.png


2、云开发初始化


(1)新建一个云开发的文件夹cloud


image.png


(2)在project.config.json文件中添加代码,指定云开发的文件为我们刚刚创建的cloud文件夹


"cloudfunctionRoot": "cloud/",


(3)再来到app.js文件中用下面的代码代替原先的代码

App({
  onLaunch: function () {
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力')
    } else {
      //env环境应该替换成自己的环境id
      //traceUser将用户访问记录到用户管理中,在控制台中可以看到访问用户的信息,我们一般将他设置为true
      wx.cloud.init({
        env: 'test-59478a',
        traceUser: true
      })
    }
  }
})


保存了之后,这里cloud云开发文件后面的就会指定我们现在创建的test云开发环境,文件夹上面会有一个云的标志。


image.png


如果你保存文件之后,还是显示的未指定环境,那么可以关闭微信开发者工具,重新打开这个项目,应该就正常了


3、小程序页面初始化

(1)先处理pages文件,pages文件夹里面放这我们小程序的所有页面,我们需要三个页面,index首页、logs记录页面,还有me我的页面,我们创建一个me文件夹

在pages文件夹上面右键,选择新建目录,再在创建好的me文件夹上面右键,新建page


image.png


(2)再创建一个images目录,将准备好的图片粘贴进来,选中之后的图片以及未选中的图片


image.png


(3)接下来我们来到app.json文件中,先修改window对象中的导航栏颜色和导航栏标题


"navigationBarBackgroundColor": "#EA5149",
"navigationBarTitleText": "猫宁一",


再来加上tab栏


"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "image/binggan.png",
        "selectedIconPath": "image/binggan-active.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "iconPath": "image/danhuang.png",
        "selectedIconPath": "image/danhuang-active.png",
        "text": "日志"
      },
      {
        "pagePath": "pages/me/me",
        "iconPath": "image/huasheng.png",
        "selectedIconPath": "image/huasheng-active.png",
        "text": "我的"
      }
    ]
  },


现在页面基本上搭建完成了,来看一下效果


image.png

目录
打赏
0
0
0
0
3311
分享
相关文章
weixin163基于微信小程序的校园二手交易平台系统设计与开发ssm(文档+源码)_kaic
本文介绍了一款基于微信小程序的校园二手物品交易平台的开发与实现。该平台采用Java语言开发服务端,使用MySQL数据库进行数据存储,前端以微信小程序为载体,支持管理员和学生两种角色操作。管理员可管理用户、商品分类及信息、交易记录等,而学生则能注册登录、发布购买商品、参与交流论坛等。系统设计注重交互性和安全性,通过SSM框架优化开发流程,确保高效稳定运行,满足用户便捷交易的需求,推动校园资源共享与循环利用。
weixin116大学生就业平台微信小程序+ssm(文档+源码)_kaic
本文介绍了一款大学生就业平台微信小程序的开发过程,涵盖开发环境、系统设计、实现与测试等方面。该小程序基于微信平台特性,采用MYSQL数据库存储数据,确保系统稳定与安全,同时满足学生、企业和管理员不同权限用户的功能需求。通过简化操作流程,实现了招聘信息查看、简历投递等实用功能,旨在为用户提供便捷高效的求职体验,符合“操作简单,功能实用”的设计理念。
weixin168“返家乡”高校暑期社会实践微信小程序设计与开发ssm(文档+源码)_kaic
本文探讨高校暑期社会实践微信小程序的开发与应用,旨在通过信息化手段提升活动管理效率。借助微信小程序技术、SSM框架及MySQL数据库,实现信息共享、流程规范和操作便捷。系统涵盖需求分析、可行性研究、设计实现等环节,确保技术可行、操作简便且经济合理。最终,该小程序可优化活动发布、学生信息管理和心得交流等功能,降低管理成本并提高工作效率。
基于SpringBoot的智慧停车场微信小程序源码分享
智慧停车场微信小程序主要包含管理端和小程序端。管理端包括停车场管理,公告信息管理,用户信息管理,预定信息管理,用户反馈管理等功能。小程序端包括登录注册,预约停车位,停车导航,停车缴费,用户信息,车辆信息,钱包充值,意见反馈等功能。
208 5
基于SpringBoot的智慧停车场微信小程序源码分享
微信小程序开发全流程:从注册到上线的完整指南
这篇文章详细记录了微信小程序的完整开发到最终上线的每一个步骤。适合对小程序开发感兴趣的个人开发者或希望了解完整流程的学习者,涵盖了云开发、事件绑定、生命周期管理、组件使用等关键内容。
1155 11
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
376 3
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
1238 3
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
173 2
微信小程序制作 购物商城首页 【内包含源码】
这篇文章提供了一个微信小程序购物商城首页的实现方法和源码,包括页面布局、数据结构、核心代码以及如何配置tabBar和搜索框组件。
微信小程序制作 购物商城首页 【内包含源码】
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
1363 0

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问