在微信公众平台|小程序中下载微信开发者工具
申请微信公众号，进入微信公众平台|小程序 首页
      


点击  “文档”进入微信小程序介绍的界面

在微信小程序界面的菜单中  选中“开发”，点击“小程序开发”

弹出：

选中  “工具”，点击链接字 “微信开发者工具”，



点击链接字 “微信开发者工具”，进入下载界面，根据自己电脑下载不同的版本。

选中即可下载完成。

下个微信开发者者工具 附上官网地址。因为找着有点迷瞪

微信公众平台：（下载开发者工具）
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201714

微信开放平台：（下载开发资源包）
https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419319164&token=&lang=zh_CN

这次学习只为了解，不深入，看了B站一个讲得很好的学长记录的笔记。

下载微信开发者工具之后，微信扫码登录，创建小程序，在AppID中选择测试号，这样对于开发者测试比较方便。
编译界面如图，（打码部分是微信昵称和头像）


1.创建页面


编译方法： （1）界面有“编译”快捷按钮； （2）快捷键ctrl+s
.js .json .wxml .wxss不同文件的注释方法都略有不同，需要注意




全局文件有三个：app.js   app.json   app.wxss  （名称不可更改）；


创建Pages目录文件，用来存放各个页面；


创建页面，页面名字以及4个文件

1）js：页面逻辑实现

2）json：负责标题栏和一些状态栏

3）wxml：管理页面内容

4）wxss：页面排布


把内容单元封装在view内部： <view>内容</view>

用class方式进行页面布局，class也可以对组件进行布局，

class规定的样式名称前要加 ’ . ’ ，也可以对image、text组件不加点进行全局布局。


获取图片、文字、按钮的组件，在index.wxml中进行

1）图片 <image src='图片路径 '></image>

2）文字 <text>内容</text>

3）按钮 <button "属性内容">按钮上的内容</button>


页面设计

在index.wxml中会有<view class="container"> </view>，container是自命名的一个容器，这个容器放在index.wxss文件中，主要是设计样式。


逻辑设计，在index.js文件中进行

函数定义方法：函数名：function(参数列表){函数内容}，  （函数结尾要有逗号）

变量定义方法：data：{变量名称：‘内容’}   （两个变量的定义之间用逗号隔开）


2.示例对应解释


index.wxml中的内容




index.js中部分内容






index.wxss对应内容




3.补充wxss之flex布局
3.1wxss
（1）尺寸单位“rpx”

原理是无视设备原先的尺寸，统一规定屏幕宽度为750rpx。比如相对于iphone6，1rpx=0.5px。
（2）常用属性

background-color — 背景色

color — 前景色

font-size — 字体大小

border — 边框

width — 宽度

height —  高度
（3）内联样式

a)class 如前所使用

b)style

<view style="color:red;background-color:yellow">测试</view>
3.2flex布局
1.基本概念

（1）容器和项目
<view class="a">  
	<view class="b">    
		<view class="c"></view>  
	</view>
</view>
对于a,b：a是容器，b是项目

对于b,c：b是容器，c是项目
（2）坐标轴

默认是水平布局：从左向右方向为主轴，从上向下方向为辅轴；

垂直布局：从上向下方向为主轴，从左向右方向为辅轴。
2.容器属性
.container {
  height: 100%;
  display: flex;  
  flex-direction: column;   
  /* 设置主轴方向  
  row||row-reverse||column-reverse 
  其中reverse是指主轴方向设为相反方向 */
  
  align-items: center;  
  /* 设置项目在行中的对齐方式  
  stretch默认值，未设置项目尺寸时将项目拉伸填满辅轴；  
  flex-start，项目顶部与辅轴起点对齐，对应有flex-end；  
  center，项目在辅轴居中对齐； */
  
  justify-content: space-between;  
  /* 设置项目在主轴方向上的对齐方式，分配项目之间及其周围多余的空间  
  flex-start默认值，项目对齐主轴起点，项目间不留空隙，对应有flex-end；  
  center，项目在主轴上居中，项目间不留空隙；  
  space-between，项目间距相等，第一个和最后一个项目分别与起点和终点对齐；  
  space-around，项目间距相等，第一个和最后一个项目与起点和终点的距离为中间项目间距的一半；*/
  
  align-content: center;  
  /* 用于多行排列时设置项目在辅轴上的对齐方式，分配项目之间及其周围多余的空间  
  flex-start,flex-end,center,space-between,space-around与以上类似，  
  只不过是以整行项目为单位 */
  
  flex-wrap: inherit;  
  /* 用于规定是否允许项目换行，以及多行排列时换行的方向  
  nowrap默认值，不换行，若单行内容过多，项目宽度会被压缩；  
  wrap，允许换行；  
  wrap-reverse，允许换行，换行方向为wrap的反方向 */  
  
  padding: 200rpx 0;  
  box-sizing: border-box;} 

微信公众平台官方下载地址：

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html