DAY2 微信小程序项目环境搭建

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq920896923/article/details/92799669

 

 

 

 

 

 

一.安装微信开发者工具的步骤

1.进入微信公众平台官网首页

2.在开发工具中找到普通小程序微信开发者工具并点击进入

3.点击微信开发者工具

4.下载Windows64位的稳定版 Stable Build (1.02.1904090)

需要注意的信息:

①成员管理

AppID(小程序ID)  

.小程序简介|微信开发

1.小程序与普通网页开发的区别:

1.1渲染层和逻辑交互层是互不干扰的,内容和表现分离。小程序的主要开发语言是 JavaScript

1.2网页开发渲染线程和脚本线程是互斥的,这也是为什么长时间的脚本运行可能会导致页面失去响应,而在小程序中,二者是分开的,分别运行在不同的线程中。

1.3网页开发者可以使用到各种浏览器暴露出来的 DOM API,进行 DOM 选中和操作。而如上文所述,小程序的逻辑层和渲染层是分开的

1.4网页开发者需要面对的环境是各式各样的浏览器,PC 端需要面对 IEChromeQQ浏览器等,在移动端需要面对SafariChrome以及 iOSAndroid 系统中的各式 WebView 。而小程序开发过程中需要面对的是两大操作系统 iOS Android 的微信客户端,以及用于辅助开发的小程序开发者工具.

1.5网页开发者在开发网页的时候,只需要使用到浏览器,并且搭配上一些辅助工具或者编辑器即可。小程序的开发则有所不同,需要经过申请小程序帐号、安装小程序开发者工具、配置项目等等过程方可完成。

 

2.小程序云开发展示:

2.1组件:视图容器、基础内容、表单组件、导航、媒体组件、地图、画布、开发能力

2.2接口:开放接口、界面、设备、网络、媒体、位置、数据、多线程

2.3云开发:用户鉴权、数据库、存储、云函数

 

三.微信小程序项目环境搭建

1.具体介绍

1.1 app.js文件是项目的入口文件。在小程序打开的那一瞬间执行。小程序先获取权限,再执行首页中的脚本。

1.2 app.wxss是整个小程序的公共样式表,是全局的css样式。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。如果页面有自己的样式表, 则会覆盖公共样式表。

1.3 app.json使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等

②是页面路径,是路由。

1.4 wxml是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。1.5 project.config.json 每一个开发者工具的配置情况,开发习惯保存在json文件中。每个页面中有单独的json,每个页面可以覆盖全局的json

 

2.项目构成(最基本的小程序模板)

可在微信公众平台的文档中查看那些文件是必需文件。

2.1删除Utils:工具文件夹

2.2删除app.js中部分代码

 

2.3删除logs文件夹

2.4删除app.json中的pages/logs/logs语句

 

2.5删除index.js中的事件处理函数

 

2.6删除index.jsonLoad:function中的具体方法

2.7只保留index.json中的花括号

2.8删除index.wxml中的内容

2.9删除index.wxss中的内容

2.10 删除index.jsdata的内容

2.11删除app.wxss中的内容

 

3.实现页面下拉刷新、跳转

3.1编写app.json

{
  "pages": [
    "pages/index/index",
    "pages/classify/classify",
    "pages/shopcart/shopcart",
    "pages/mine/mine"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#5fdec9",
    "navigationBarTitleText": "今天也想吃冰淇淋",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh": true,
    "backgroundColor": "#ddddff"
  },
  "tabBar": {
    "color": "#666",
    "selectedColor": "#5fdec9",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "assets/icons/home.png",
        "selectedIconPath": "assets/icons/achome.png"
      },
      {
        "pagePath": "pages/classify/classify",
        "text": "分类",
        "iconPath": "assets/icons/classify.png",
        "selectedIconPath": "assets/icons/acclassify.png"
      },
{
  "pagePath": "pages/shopcart/shopcart",
  "text": "购物车",
  "iconPath": "assets/icons/shopcart.png",
  "selectedIconPath": "assets/icons/acshopcart.png"
},
{
  "pagePath": "pages/mine/mine",
  "text": "我的",
  "iconPath": "assets/icons/mine.png",
  "selectedIconPath": "assets/icons/acmine.png"
}

    ]
  },
  "sitemapLocation": "sitemap.json"
}

3.2小程序截图

 

四.课后作业:骰子布局

默认的html文件配置:

<!DOCTYPE html>         
<html>          
<head>              
<meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">  
<title>骰子的布局(flex)
</title>              
<style type="text/css"> 
body{margin: 0} 
.m-container{margin: 5px; 
padding: 5px; 
width:100px;
height: 100px;border:1px solid green;}  
 .m-item {
margin: 5px;
width: 20px;height: 20px;
border-radius: 10px;
background-color: black;} 
</style>         
</head>            
<body>         
<div class="m-container box"> 
/*视骰子点数而定*/
<span class="m-item">
</span>
</div> 
</body>
</html>  

点数1

.box1 
{display: flex;
justify-content: center;
align-items: center;}  
 /*水平垂直居中*/

 

<div class="m-container box1">
    <div class="m-item" ></div>

点数2

.box2 {
display: flex;
flex-direction: column; 
justify-content: space-between;align-items: center;}
/*水平居中,两端对齐*/ 

 

<div class="m-container box2">
    <div class="m-item" ></div>
    <div class="m-item" ></div>

点数3

.box3{
  display: flex;
  flex-direction:row;
  align-content: space-between;

 

 <div class="m-container box3">
    <div class="m-item" style="align-self: flex-start"></div>
    <div class="m-item" style="align-self: center"></div>
    <div class="m-item" style="align-self: flex-end"></div>

点数4

 

.column {
  flex-basis: 100%;
  display: flex;
  justify-content: space-between;
}   
.box4{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: space-between;
}

 

 

<div class="m-container box4">
  <div class="column">
    <span class="m-item"></span>
    <span class="m-item"></span>
  </div>
  <div class="column">
    <span class="m-item"></span>
    <span class="m-item"></span>
  </div>

点数5(在点数4的基础上添加)

.column-c {
  flex-basis: 100%;
  display: flex;
  justify-content: center;
}   

 

 <div class="column-c">
    <span class="m-item"></span>
  </div>

点数6(在点数6的基础上添加)

.column {
  flex-basis: 100%;
  display: flex;
  justify-content: space-between;
}   
<div class="column">
    <span class="m-item"></span>
    <span class="m-item"></span>
  </div>

 

展开阅读全文

没有更多推荐了,返回首页