小程序注册及登陆

一、注册个人公众号，及小程序账号
        两者不可用同一邮箱注册

二、下载开发者工具

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

三、下载安装完后扫码进行登陆、新建项目

appid 在小程序开发设置中查找

四、页面创建

全局三个文件，分别是app.js app.json app.wxss(名称不可更改)

创建Pages目录文件，作用是用来放各个页面得

创建页面，给页面起名字，并且创建4个文件

1.js：页面的逻辑实现

2.jason：负责标题栏和一些状态栏

3.wxml:页面有什么内容

4.wxss：页面内容得排布，位置得整理

快速注释CTRL+/

把内容单元封装在view内部中，写法<view>内容</view>

组件，图片<image>  文字<text> 按钮<button>

图片文件需要新创建一个文件夹，然后进行定位<image src='/images/a.jpg'></image>

五、开始设置页面得布局

/* pages/index/index.wxss */

.container{

  height:100vh; /*高100视窗，这里写100%是无效的*/

  display:flex; /*flex布局方法*/

  flex-direction:column;/*垂直布局*/

  align-items:center;/*水平方向居中*/

  justify-content: space-around;/*垂直方向分散布局*/

}

六、对内容来进行封装

用class 或者image属性都可以，class优先级大于自身属性

添加button的属性内容open-type和bindgetuserinfo

js文件中函数的定义方法

js文件：函数名+":"+function("参数列表"){ "函数内容"}

七、js变量

{{变量名称}}

变量值在index.js中的data里

data：{变量名：内容}

八、构建方法

修改变量的方法：this.setData({"修改变量"})

getMyInfo:function(e){

    console.log(e.detail.userInfo)

    let info =e.detail.userInfo;

    this.setData({

      name:info.nickName,//更新名称

      src:info.avatarUrl//更新图片来源

    })

  },

九、标题栏

inex.json：页面中的标题栏

app.json：全局中的标题栏

在app.json中添加window，注意，号