微信小程序学习第一天

1.下载软件

1. 下载微信开发者工具地址
2. 注册微信公共平台账号，拿到appid。
   地址
3. 注册微信公共平台账号，拿到appid。

2.新建项目

简单介绍微信开发者工具

常用快捷键
Ctrl+Enter ——换行
Shift+Alt+↓——向下复制
Ctrl+S——保存
Ctrl+/——注释
PS：其他需要请自行百度

3.day01学习笔记

• 1.删除pages内的文件

在自己的硬盘中找到项目路径中的pages文件夹删除里面所有文件

同时删除 app.json中pages下的代码

• 2.创建pages文件

方法1
在app.json的pages下写一个路径
软件为自动创建一个pages文件（按Ctrl+S或者点上面的编译）

方法2
右键pages新建目录

输入你的目录名

右键exam2（我的目录名） 选择——新建Page


创建成功

Page的简单介绍：
.js——当前组件js
.json——看名字
.wsml——看名字
.wxss——差不多css 样式文件

小程序没有使用html 标签使用xml (可扩展标记语言) wxml
#wxml格式比较严格
#常见标签(组件)
<view></view> 相当于<div></div> #块级元素
<text></text> 相当于<span><p> #行内元素
<image></image> 相当于<img src="" /> #图片

<text>今天天气真好</text>

<image src="/images/01.jpg"></image>

首先你要在images文件夹中有01.jpg图片

引入样式（同名样式文件自动加载，无需引入）

<view class="box">面向大海，春暖花开</view>

显示出来如图：

公共样式表
在style中新建 .wxss文件

里面写

.admin{
  font-size:29px;
  background-color: pink; 
}

还要在同名文件的 .wxss文件中引入公共样式表

结果如图：

在页面显示js里的数据

  data: {
    msg:'你有一条好消息',
    num:2000,
    list:['小明','小红','影不再']
  },

<text>{{msg}}</text>
<text>{{num}}</text>

一个一个的取出list数组中的元素，使用遍历的方法

<view wx:for="{{list}}" wx:key="index">{{item}}--{{index+1}}</view>

index是根据索引遍历，index+1显示从1开始

if判断，删除元素进行隐藏

//原理：删除元素进行隐藏
<view wx:if="{{age<18}}">年龄小于18</view>

当age等于18 隐藏

另一种隐藏，常用（删除、添加——费时间）

//原理：通过css的隐藏样式，控制元素的显示和隐藏
<text hidden="{{sex=='女生'}}">女生隐藏</text>

接下来学习了，地图的显示，借用了百度的拾取坐标系统。找到你先要的位子，复制经纬度
拾取坐标网址

<!-- 地图 -->
<!-- 北京站：116.435314,39.909843 -->
<map id="beijing" style="width:100%;height:600rpx;"
    longitude="116.435314"
    latitude="39.909843"
    scale="14"
></map>

得到

• PS：写的感觉没啥逻辑，想到啥写啥。