微信小程序01

简单准备

安装环境

下载微信开发者工具

搜索“微信小程序api”，选择“工具”，点击“微信开发者工具”，选择稳定版，选择自己电脑的版本，我的是windows64(但是选择这个打开后一直打不开不知道为什么，然后我选了32位就好了)。

新建项目

选择新建项目，appid选择“测试号”(刚开始比较简单)。

简单描述

pages里有index首页和logs启动日志
utils是公共的文件
.js是逻辑层
.json是配置项
.wxcss是样式层

js里面写方法，html里面写内容，css里面写样式，json里面写配置

简单了解

编译——>提供编译模式，可以显示不同的页面

简单代码

从“微信小程序api”里面获得代码解说和说明

组件

基础布局

1.view块标签(类似div块,冒泡阻止hover-stop-propagation
2.text行标签(类似span一行的，可选中user-select,空格space,解析decode)

图像媒体组件

0.右击在资源管理器中新建一个images
1.图片image有默认宽高，mode属性可设置，常用widthFix缩放模式
2.show-menu-by-longpress长按图片可保存发送
3.src=网络地址也可以

超链接（navigator是块元素）

1.用url跳转，但是小程序不可跳到网络网站
2.open-type跳转方式(可不可以再跳回去)

scroll-view滚动视图

0.弹性盒模型display:flex，在同一行用flex-wrap:nowrap
1.scroll-x,scroll-left=“150”是横向滚动，在什么地方出现半个

swiper轮播组件

1.rpx是小程序轮播图自适应比例的单位
2.indicator-dots点
3.circular循环

表单组件

1.button:primary,disabled,loading,open-type
2.form:bindsubmit,
3.checkbox:
4.input:auto-focus
5.switch

其他类型组件

icon,progress

框架

全局配置（在app.json里面）

1.改window，一般4个
2.加上tabBar底边，里一定有list(2-5)，(pagePath,text,iconPath,selectedIconPath)

单页面配置（在pages里面的…json里面）

wxml数据绑定

1.在demo.js里面写data数据，在demo.wxml里面调用数据(数组，对象等)

wxml的条件渲染：if

1.wx:if="{{false}}" wx:elif wx:else
js代码判断要写在{}里面,字符串直接写在"里
2.block 标签不显示出来，只是做一个wx:if包裹
3.if,elif,else必须靠在一起，否则会报错

wxml的列表渲染：for

1.wx:for="{{数组}}" {{index}} {{item}}
2.数组的元素是item，而对象则是item.a
3.wx:key=“this” wx:key=“index”

框架接口

在js里面的demo.js里各生命周期函数

1.全部删除然后，输入page选择第二个然后回车就全部初始化显示了
2.生命周期函数
onLoad——>onReady——>onShow——>onHide
onload,onready一个页面只加载一次
onload监听页面加载
onready监听页面初次渲染完成
onshow监听页面提示
onhide监听页面隐藏
3.页面相关事件处理函数
监听用户下拉动作onPullDownRefresh
页面下拉触底事件onReachBottom(高度很高)
点击右上角分享onShareAppMessage

事件函数及其setData语法（自定义事件）

1.绑定事件：bindtap=“事件名字”，bind~="
2.pages里面是对象，data：{},事件名字：function(){},
3.从前端传过来的数据一般都在控制台console的currentTarget里面
4.只有setData方法才可以改变数据name值

api

基础语法

手机型号：wx.getSystemInfoSync.mode
加载动画：wx.showLoading
消息提示框：showToast

路由语法

设置链接不要url设为跳转到tarbar页面，如果非要跳转用open-type=“reLaunch”/“switchTab”可以带参数，不可以带

布局页面模拟数据请求

request模拟数据请求

详情—>本地设置—>不校验合法域名
后端接口去哪里找?
在unload里面写得到后端数据，然后(因为小程序分页展示多个新闻)所以要把得到页数据封装为一个函数，然后unload调用它

es6简单用法

const,let，解析变量用``反斜杠和${}，
解构赋值(数组，对象)，箭头函数function(()=>{})，
数组循环遍历：
原本for()
forEach(item,idx)
map()
for(var i of obj),
展开运算符是…arr