微信小程序实训day02-微信小程序项目环境搭建

最新推荐文章于 2022-07-15 16:01:16 发布
最新推荐文章于 2022-07-15 16:01:16 发布
阅读量370 收藏 2
点赞数
分类专栏： 作业
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ljlj8888/article/details/92800567
版权

 

1、申请微信小程序帐号

进入小程序注册页 根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。

在这个小程序管理平台，你可以管理你的小程序的权限，查看数据报表，发布小程序等操作。

登录 小程序后台 ，我们可以在菜单 “设置”-“开发设置” 看到小程序的 AppID 了 。

小程序的 AppID 相当于小程序平台的一个身份证，后续你会在很多地方要用到 AppID （注意这里要区别于服务号或订阅号的 AppID）。

有了小程序帐号之后，我们需要一个工具来开发小程序。

2、安装开发工具

前往 开发者工具下载页面 ，根据自己的操作系统下载对应的安装包进行安装，有关开发者工具更详细的介绍可以查看 《开发者工具介绍》 。

打开小程序开发者工具，用微信扫码登录开发者工具，准备开发你的第一个小程序吧！

3、你的第一个小程序

新建项目选择小程序项目，选择代码存放的硬盘路径，填入刚刚申请到的小程序的 AppID，给你的项目起一个好听的名字，最后，勾选 "创建 QuickStart 项目" （注意: 你要选择一个空的目录才会有这个选项），点击确定，你就得到了你的第一个小程序了，点击顶部菜单编译就可以在微信开发者工具中预览你的第一个小程序。

4、小程序代码构成

  1. json 后缀的 JSON 配置文件
  2. wxml 后缀的 WXML 模板文件
  3. wxss 后缀的 WXSS 样式文件
  4. js 后缀的 JS 脚本逻辑文件

5、小程序配置 app.json

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。QuickStart 项目里边的 app.json 配置内容如下：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

6、全局配置

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象，有以下属性：

属性类型必填描述最低版本
pagesstring[]是页面路径列表 
windowObject否全局的默认窗口表现 
tabBarObject否底部 tab 栏的表现 
networkTimeoutObject否网络超时时间 
debugboolean否是否开启 debug 模式，默认关闭 
functionalPagesboolean否是否启用插件功能页，默认关闭2.1.0
subpackagesObject[]否分包结构配置1.7.3
workersstring否Worker 代码放置的目录1.9.90
requiredBackgroundModesstring[]否需要在后台使用的能力，如「音乐播放」 
pluginsObject否使用到的插件1.9.6
preloadRuleObject否分包预下载规则2.3.0
resizableboolean否iPad 小程序是否支持屏幕旋转，默认关闭2.3.0
navigateToMiniProgramAppIdListstring[]否需要跳转的小程序列表，详见 wx.navigateToMiniProgram2.4.0
usingComponentsObject否全局自定义组件配置开发者工具 1.02.1810190
permissionObject否小程序接口权限相关设置微信客户端 7.0.0
sitemapLocationString是指明 sitemap.json 的位置

7、微信小程序开发文档

微信小程序开发文档

8、作业

 1、骰子布局，把整个骰子布局做出来到页面上（flex布局）
 2、把小程序（底部导航功能等）完成，能在手机上看或能在开发者工具调试都可以

1、
index.html

<!DOCTYPE html>
<html>
<head>
	<title>骰子布局</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body style="background-color: black;width: 100%;height: 100%">
<h1 style="color: white;text-align: center;">骰子布局</h1>
<div style="display: flex ;flex-wrap: wrap;padding:5px">
	<div class="box1" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;margin: 10px">
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
	</div>
	<div class="box2" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;margin: 10px">
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
	</div>
	<div class="box3" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;margin: 10px">
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
	</div>
	<div class="box4" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;margin: 10px">
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
	</div>
	<div class="box5" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;margin: 10px">
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
	</div>
	<div class="box6" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;margin: 10px">
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
	</div>
	<div class="box7" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;margin: 10px">
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
	</div>
	<div class="box8" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;margin: 10px">
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
	</div>
	<div class="box9" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;margin: 10px">
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
	</div>
	<div class="box10" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;margin: 10px">
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
	</div>
	<div class="box11" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;margin: 10px">
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
	</div>
	<div class="box12" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;margin: 10px">
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
	</div>
	<div class="box13" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;margin: 10px">
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
	</div>
	<div class="box14" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;margin: 10px">
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px" ></div>
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px" class="box14dot2"></div>
	</div>
	<div class="box15" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;margin: 10px">
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px" ></div>
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px" class="box15dot2"></div>
	</div>
	<div class="box16" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;margin: 10px">
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px" class="box16dot2"></div>
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px" class="box16dot3"></div>
	</div>
	<div class="box17" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;padding: 1px;margin: 10px">
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
	</div>
	<div class="box18" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;padding: 1px;margin: 10px">
		<div class="box18column">
			<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
			<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
		</div>
		<div class="box18column">
			<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
			<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
		</div>
	</div>
	<div class="box19" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;padding: 1px;margin: 10px">
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
	</div>
	<div class="box20" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;padding: 1px;margin: 10px">
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
	</div>
	<div class="box21" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;padding: 1px;margin: 10px">
		<div class="box21row1">
			<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
			<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
			<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
		</div>
		<div class="box21row2">
			<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px" ></div>
		</div>
		<div class="box21row3">
			<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
			<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
		</div>
	</div>
	<div class="box22" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;padding: 1px;margin: 10px">
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
	</div>
</div>
</body>
</html>

index.css

.box1{
	display: flex;
}
.box2{
	display: flex;
	justify-content: center;
}
.box3{
	display: flex;
	justify-content: flex-end;
}
.box4{
	display: flex;
	align-items: center;
}
.box5{
	display: flex;
	justify-content: center;
	align-items: center;
}
.box6{
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.box7{
	display: flex;
	align-items: flex-end;
}
.box8{
	display: flex;
	justify-content: center;
	align-items: flex-end;
}
.box9{
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
}
.box10{
	display: flex;
	justify-content: space-between;
}
.box11{
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}
.box12{
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	align-items: center;
}
.box13{
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	align-items: flex-end;
}
.box14{
	display: flex;
}
.box14dot2{
	align-self: center;
}
.box15{
	display: flex;
	justify-content: space-between;
}
.box15dot2{
	align-self: flex-end;
}
.box16{
	display: flex;
}
.box16dot2{
	align-self: center;
}
.box16dot3{
	align-self: flex-end;
}
.box17{
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;
	justify-content: flex-end;
}
.box18{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.box18column{
	display: flex;
	justify-content: space-between;
}
.box19{
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;
}
.box20{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-content: space-between;
}
.box21{
	display: flex;
	flex-wrap: wrap;
}
.box21row1{
	display: flex;
	flex-basis: 100%;
}
.box21row2{
	display: flex;
	flex-basis: 100%;
	justify-content: center;
}
.box21row3{
	display: flex;
	flex-basis: 100%;
	justify-content: space-between;
}
.box22{
	display: flex;
	flex-wrap: wrap;
}

2、

_lijian_
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序完整项目实战(前端+后端)
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
06-20 14万+
基于微信小程序的在线商城系统，采用前后端分离的模式，使用C#作为后端语言进行开发，界面完整，上手简单。
黑马微信小程序项目实战
smilecb的博客
01-23 8242
文章目录1.小程序的第三方框架2. 项目的接口文档地址3.项目的搭建3.1新建小程序项目3.2搭建目录结构 1.小程序的第三方框架 腾讯 wepy 类似于vue 美团 mpvue 类似于vue 京东 tao 类似于react 滴滴 chameleon uni-app 类似于vue 原生框架MINA 2. 项目的接口文档地址 https://www.showdoc.com.cn/128719739414963/2513235043485226 3.项目的搭建 3.1新建小程序项目 填入自己的openID
微信小程序项目实训
小菜鸟博客
07-27 2989
文章目录小程序项目培训实践周记第一周周记第二周周记 小程序项目培训实践周记 第一周周记   第一周实训很快就过去了，这一周是整个实训的开始，我们知道了整个实训要完成的项目—微信小程序订餐系统，于是，我们这组便开始进行项目。   我们整理项目资料，然后对各自的特长分好工，我主要负责微信小程序部分后端的任务。我觉得不管个人完成什么任务，都要对这个项目有所了解，同时还要处理好信息对等，互相需要沟通好，如...
大三实训-微信小程序
Mjj567的博客
06-13 546
微信小程序-垃圾识别分类
微信小程序：navigateToMiniProgram跳转小程序报错fail appId "wx......." is not in navigateToMiniProgramAppIdList...
IT老五
12-29 8177
小程序中需要用到医保支付，最早的做法是，在web-view中点击提交后，通过h5下单完毕，跳回小程序的页面后，主动跳到医保支付小程序。 在之前都正常，直到昨天iphone的微信升级到7.0.0后，不能跳转了，通过调试，报错：fail appId "${appId}" is not in navigateToMiniProgramAppIdList 基础...
微信小程序-微信小程序-仿豆瓣电影-demo小程序项目源码-原生开发框架-含效果截图示例.zip
最新发布
05-22
跨平台兼容性：微信小程序可在多种操作系统和设备上运行，无需考虑不同平台的适配问题，为开发者提供了统一的开发环境。 丰富的API接口：微信提供了丰富的API接口，使得开发者能够轻松实现各种功能，如微信支付、...
微信小程序开发图解案例教程-源代码
05-06
微信小程序开发图解案例教程-源代码微信小程序开发图解案例教程-源代码微信小程序开发图解案例教程-源代码微信小程序开发图解案例教程-源代码微信小程序开发图解案例教程-源代码微信小程序开发图解案例教程-源代码...
微信小程序练手项目-音乐播放器(完整代码)
01-06
微信小程序练手项目-音乐播放器(完整代码)微信小程序练手项目-音乐播放器(完整代码)微信小程序练手项目-音乐播放器(完整代码)微信小程序练手项目-音乐播放器(完整代码)微信小程序练手项目-音乐播放器(完整代码)微信...
微信小程序练手项目-知乎日报(完整代码)
01-06
微信小程序练手项目-知乎日报(完整代码) 微信小程序练手项目-知乎日报(完整代码) 微信小程序练手项目-知乎日报(完整代码) 微信小程序练手项目-知乎日报(完整代码) 微信小程序练手项目-知乎日报(完整代码) 微信小程序...
微信小程序用户授权-首页-登录master.zip
02-27
微信小程序用户授权-首页-登录master.zip微信小程序用户授权-首页-登录master.zip微信小程序用户授权-首页-登录master.zip微信小程序用户授权-首页-登录master.zip微信小程序用户授权-首页-登录master.zip微信小程序...
微信小程序项目实践开发全集
03-26
1.配置和目录结构 2.动画 3.canvas和下拉刷新 4.设备信息 5.拨打电话和剪切板 6.媒体图片功能 ......
软件工程实践案例分析+报告（微信小程序+mysql数据库+web后台管理）.zip
02-23
软件工程实践案例分析+报告（微信小程序+mysql数据库+web后台管理）.zip软件工程实践案例分析+报告（微信小程序+mysql数据库+web后台管理）.zip软件工程实践案例分析+报告（微信小程序+mysql数据库+web后台管理）.zip软件工程实践案例分析+报告（微信小程序+mysql数据库+web后台管理）.zip软件工程实践案例分析+报告（微信小程序+mysql数据库+web后台管理）.zip软件工程实践案例分析+报告（微信小程序+mysql数据库+web后台管理）.zip软件工程实践案例分析+报告（微信小程序+mysql数据库+web后台管理）.zip软件工程实践案例分析+报告（微信小程序+mysql数据库+web后台管理）.zip软件工程实践案例分析+报告（微信小程序+mysql数据库+web后台管理）.zip软件工程实践案例分析+报告（微信小程序+mysql数据库+web后台管理）.zip软件工程实践案例分析+报告（微信小程序+mysql数据库+web后台管理）.zip软件工程实践案例分析+报告（微信小程序+mysql数据库+web后台管理）.zip软件工程实践案例分析+报告（微信小程序+mysql数据库+web后台管理）.zip软件工程实践案例分析+报告（微信小程序+mysql数据库+web后台管理）.zip软件工程实践案例分析+报告（微信小程序+mysql数据库+web后台管理）.zip软件工程实践案例分析+报告（微信小程序+mysql数据库+web后台管理）.zip软件工程实践案例分析+报告（微信小程序+mysql数据库+web后台管理）.zip软件工程实践案例分析+报告（微信小程序+mysql数据库+web后台管理）.zip软件工程实践案例分析+报告（微信小程序+mysql数据库+web后台管理）.zip软件工程实践案例分析+报告（微信小程序+mysql数据库+web后台管理）.zip软件工程实践案例分析+报告（微信小程序+mysql数据库+web后台管理）.zip
微信小程序-商城源码+后台数据库
08-28
微信小程序， 商城开发，带前端和后端源码 + 配置说明，非常实用。
大学生毕业设计项目实训 基于Vue开发的2020年新冠肺炎疫情期间学校体温上报登记系统(手机移动端网站).zip
01-11
大学生毕业设计项目实训 基于Vue开发的2020年新冠肺炎疫情期间学校体温上报登记系统(网站).zip 所用技术: Vue2 MUI 延迟加载,动态加载数据: 下拉加载,上拉刷新 accordion手风琴 展开,收缩 三级联动选择控件: 年 月 日 三级联动选择控件: 省 市 区县
大三集中实训做的一个微信小程序之点餐系统（静态页面不包含java后台逻辑）
11-19
大三集中实训的时候由于没有什么经验，只实现了静态页面，但微信小程序开发文档里面所有的功能差不多都实现（视频的上传与下载以及登录等等）所以在这里记录自己的学习笔记,此资源在博客文有详细介绍
微信小程序实训｜基于云数据库的语文听写工具
不断学习，不断进步，提高自己
07-15 2937
本实训项目结合云开发的云数据库和 “微信同声传译”插件，制作一个可真实运营的小学生语文听写工具
基于Java+servlet+MySQL+微信小程序实现的用户注册登录小程序（登录会返回用户的注册信息）
04-28
用户注册需要输入用户名、密码、性别、出生年月日、爱好、住址、电话、个性签名，注册成功后会返回登录界面，登录时需要输入用户名和密码，登录成功后即可跳转到登录成功界面，会展示用户的所有信息。 本程序用到Java+servlet+MySQL+微信小程序实现。
LNTU教务在线微信小程序
01-27
LNTU教务在线微信小程序-源码
微信小程序 实例汇总 完整项目源代码
11-17
微信小程序 实例汇总 完整项目源代码
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值