微信小程序

访问网站：

mp.weixin.qq.com

AppID(小程序ID) 

小程序-- 运行在微信中的程序

x.json 配置参数

wxss相当与css样式

x.js 逻辑

wxml相当于html（结构）

---

在app.json

创建新的界面：

pages:[

//谁放在第一页，谁就被默认为首页：

"pages/index/index",

"pages/main/mian"

]

tabBar 底部选项卡(底部导航栏)：

"list" --底部列表

最少是2个，最多是5个

pagePath：页面路径

test：信息

iconPath： 未选中图片路径（默认）：

selectedIconPath：选中时显示的图片

---

在*.wxml

container 默认的样式

注意在微信小程序中没有action属性，

是通过bindsubmit属性来定义提交的函数（路径），

type="primary" 相当于添加了一个css样式

form-type ="submit" 表示点击是提交到bindsubmit定义的方法处。

------------------------------------------------

<view class="container">

<form bindsubmit="login2">

<input name ="account" placeholder="账号" />

<input name ="password" password placeholder="密码" />

<button type="primary" form-type="submit">登录</button>

</form>

</view>

-------------------------------------------------

在*.js页面

showToast 弹出框

title：弹出框的内容

duration：弹出框的显示时间

-------------------------------

wx.showToast({

title:'onshow()',

duration:3000

})

--------------------------------

页面的跳转：

当页面被绑定到选项卡上时，使用navigate不再能实现跳转功能，

这时可以使用switchTab方法。

wx.navigateTo({

url: '../main/main',

})

--------------------------------

---

-------------逻辑判断--------------------------------

在*.js中

data:{

name："张三"，

x:2

}

change(e){

var y = e.detail.value;

this.setData({x:y}),

}

在*.wxml页面

取值：

{{name}}:

{{ }}获取js文件中的data中的值：

判断：

在微信小程序中没有if-else等多支判断，只有单支判断。

注意：

条件表达式要放在""(双引号)之间。

<input placeholder="请输入数据" bindinput="change" value="{{ x}}"/>

<view wx:if="{{x>5}}">

<text>大于5</text>

</view>

<view wx:if="{{x<5}}">

<text>小于5</text>

</view>

-------------------------------------------------------------

循环：

在*.js文件中添加数组

data:{

books:["hong","lou","meng"]

}

在*.wxml

<view wx:for="{{books}}" style="border-bottom:1px black solid">

<text style="color:red;fond-size:20pt">

{{item}}//固定的参数

</text>

</view>

--------------------------------------------------------------

音频：

在*.wxml添加音频标签

<audio src="http://127.0.0.1:8080/res/a.mp3" controls="true"></audio>

视频：

在*.wxml中添加视频标签：

<video src="http://127.0.0.1:8080/res/*.mp4" controls="true"></video>

---

左右滑动

current : -- 页面显示的脚标

<swiper current="{{curpage}}">

<swiper-item></swiper-item>

<swiper-item></swiper-item>

</swiper>

----------------------------------------

顶部导航栏

display:flex;justfly-content:space-around:--水平居中

display:flex;align-items:center--垂直居中

data-index: 自定义属性

在页面上

<view style="height:50px;background-color:red;display:flex;justfly-content:space-around">

<block wx:for="{{tops}}">

<view style="display:flex;align-items:center" bindtap="change" data-index="{{index}}">

<text>{{item}}</text>

</view>

</block>

</view>

线程：创建，同步和通信