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

最新推荐文章于 2024-07-27 14:56:48 发布

原创最新推荐文章于 2024-07-27 14:56:48 发布 · 316 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍微信小程序开发相关内容。首先阐述安装微信开发者工具的步骤及注意信息，接着对比小程序与普通网页开发的区别，展示小程序云开发内容。然后详细说明微信小程序项目环境搭建，包括文件介绍、项目构成及页面操作实现。最后布置了骰子布局的课后作业。

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

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 端需要面对 IE、Chrome、QQ浏览器等，在移动端需要面对Safari、Chrome以及 iOS、Android 系统中的各式 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.js中onLoad:function中的具体方法

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

2.8删除index.wxml中的内容

2.9删除index.wxss中的内容

2.10 删除index.js中data的内容

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>