纯净模式下开发：
可以把component都删掉，
App.json**里面的skyline删掉，会自动切换成webview，**
然后可以把里面代码改为：
{
**"pages": [**
**"pages/index/index",**
**"pages/my/my"**
**],**
**"window": {**
**"navigationBarTitleText": "****功能演示",**
**"navigationBarBackgroundColor": "#0000FF",**
**"enablePullDownRefresh":true,**
**"backgroundColor": "#00FFFF",**
**"backgroundTextStyle":"dark"**
**},**
**"tabBar": {**
**"selectedColor": "#b4282d",**
**"position": "bottom",**
**"list": [**
**{**
**"pagePath": "pages/index/index",**
**"text": "****首页",**
**"selectedIconPath": "image/home.jpg"**
**},**
**{**
**"pagePath": "pages/my/my",**
**"text": "****我的",**
**"selectedIconPath": "image/my.jpg"**
**}**
**]**
**},**
**"style": "v2"**
**}**
使用矢量素材库：
选择图标，加入购物车，然后加入项目，并选择Base64查看代码，粘贴进入一个wxss，并引入
把上面这一段粘贴进去一个wxss里面就可以了，然后在index.wxss引入
@import "/static/css/font.wxss";
要使用的话就是
<text class="iconfont icon-tishi"></text>
Swiper轮播图
案例
**<swiper autoplay="true" interval="1000" indicator-dots="true" indicator-active-color="#fffff0" circular="true">**
<swiper-item>
<image src="/image/pink.png" mode="heightFix"/>
</swiper-item>
<swiper-item>
<image src="/image/jielun.jpg" mode="heightFix"/>**
</swiper-item>**
<swiper-item>**
**<image src="/image/night.jpg" mode=""/>**
**</swiper-item>**
**</swiper>**
flex布局
.menu {
display: flex;
justify-content: space-between;
padding: 16rpx;
border-radius: 10rpx;
background-color: powderblue;
flex-wrap: wrap;
}
.item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
**width: 150rpx;**
**height: 200rpx;**
**border: rgb(192,251,255) solid 1rpx;**
**margin: 1rpx;**
**background-color: powderblue;**
**}
Flex主要是盒子弹性布局，在css里面
然后有很多属性，首先要先说明display：flex才行、
然后他有六个属性
flex-direction(**主轴方向)**
flex-wrap**（换行策略）**
justify-content**（分别有flex-start,flex-end,** space-between,space-evenly,space-around,center**）主轴方向的对齐方式**
align-items(flex-start,flex-end,center,baseline**以项目的文字为基准对其，stretch如果不设置高度，将会充满容器)交叉轴方向的对其方式。**
flign-content:**定义多根轴线的对其方式，如果只有一根轴线就不起作用。**
项目属性（item）
也有六个属性
通知公告
代码：
Wxtml
**<view class="notice">**
**<image src="/image/****通知公告.png" mode="aspectFit" style="width: 200rpx; height: 100rpx;"/>**
**<text>****通知：</text>**
**</view>**
**Wxss:**
**.notice {**
**display: flex;**
**justify-content: flex-start;**
**margin-top: 20rpx;**
**margin-bottom: 20rpx;**
**}**
**.notice>text {**
**flex-grow: 1;**
**font-size: 40rpx;**
**}**
**底部：**
**Wxml**
**<view class="buttom">**
**<view>**
**<image src="/image/iconfont-iconqq.png" mode="scaleToFill"/>**
**</view>**
**<view>**
**<image src="/image/iconfont-phone.png" mode="scaleToFill"/>**
**</view>**
**<view>**
**<image src="/image/iconfont_****橡皮擦.png" mode="scaleToFill"/>**
**</view>**
**<view>**
**<image src="/image/iconfont-vip.png" mode="scaleToFill"/>**
**</view>**
**</view>**
Wxss:
**.buttom {**
**display: flex;**
**justify-content: space-between;**
**flex-wrap: wrap;**
**}**
**.buttom>view>image {**
**width: 345rpx;**
**padding: 10rpx;**
**height: 200rpx;**
**}**
前端的一个结果：
事件绑定（js）
可以对标签进行绑定，在标签里面，bind=什么什么
bind:tap=”handler”(**点击事件，就会执行handler这个函数)**
然后这个函数写在js文件里面，里面默认的初始东西可以删掉，但是函数一定要写在Page里面
bind:tap**可以简写为bindtap**
事件冒泡
父组件套了一个子组件，子组件上面有事件，父组件也绑定了事件，那现在出现了一个问题，点击一个子组件，子组件事件被触发，父组件事件也被触发。现在就是要阻止事件冒泡。
想要阻止事件冒泡也很简单：
不适用bind绑定，使用catch绑定
事件对象传参
第一种传参方式用data
Js:
clicked(event){
**//****如果有事件冒泡，他们的值是不一样的**
**//currentTarget:****事件绑定者**
**//target:****事件触发者**
console.log(event.target.dataset.id)
console.log(event.target.dataset.name)
}
Wxml
<view bind:tap="clicked" data-id="10" data-name="hello">**
点我
**</view>**
**</view>**
第二种传参方式用mark
页面跳转
1. 组件跳转(声明式导航)
Navigator**组件，实现跳转**
下面是最基本的只需要把按钮包裹在navigator组件里面就可以实现跳转。
**<navigator url="/pages/register/register">**
**<button type="primary" plain="true" >****点击跳转注册</button>**
**</navigator>**
更多跳转方式：open-type属性， 跳转方式（详细可看文档）
跳转并携带参数：
在原来的跳转navigator的url后面加个?+传参就行
跳转另一个页面的Js的onload的options里面能够获取数据。
onLoad(options) {
console.log(options)
},
1. Js**跳转(编程式跳转)**
5**个方法，和上面的open-type属性是对应的**
Wx.navigateTo({
url:’url’}
)
Wxml语法
Wxml**中使用的变量必须放在data中，{{}}模板语法**
如果要使用变量，直接，用{{变量}}就可以引用了，例如：
模板语法，不仅可以引用变量，还可以引用对象例如;
还能显示数组。
能在模板语法里面进行，变量替换，真值比较，三目运算，加减运算，但不能写js语句，还有方法。
微信小程序开发-核心API
响应式js
在按钮事件对一个数据进行计算并在页面显示的话，要用微信提供的setData方法来实现，一下是例子：首先是按钮绑定事件为handjs，然后data里面有个数据为age:15
在更改对象里面就有点不一样(home对象里面的son)，需要引用起来，例如：
Js**数组循环打印**
这在微信里面的固定写法，循环显示出数组的类容，可以记一下：
如果要通过按钮绑定事件，然后增加一个名字的话，可以使用下面写法：
handname(){
this.data.names.push('hello****大哥')
//****先追加，再赋值**
this.setData({**
'names':this.data.names
})
},
第二种写法，使用数组的concat拼接。
第三种，通过结构赋值。
更改数组内容：
删除数组值：
this.data.name.slice(1)
然后放在setdata里面
Js中的const,let和var的区别
老版本的js:定义变量用var,会有坑
新版本定义变量用let，定义常量用const(不会改)
列表渲染
主要用到的就是for循环
{{item}}</view
wx:key=’index’**这个加上不会报警告**
条件渲染
逻辑判断,if,else
Wx:if**和hidden的区别**
Wx:if**删除元素**
Hidden**不删除，只是隐藏**
发送网络请求（与后端交互）
前面的都是前端，现在这里是后端，
需要在微信的小程序端，发送网络请求，获取数据，显示在小程序上。
发送网络请求要求有域名
需要在服务器域名配置。
