微信小程序入门到实战\小程序项目\小程序开发（保姆级）

前言

1.什么是小程序？
小：项目小：2m
嵌入到微信中
Html css jss
大：
数量大
制裁（微信小程序不影响，苹果商店app不让上架）

2.为什么要会微信小程序？

要会：
入门简单
寄生于微信
跨平台
适合创业 成本低
开发效率特别高

一. 环境搭建

1-申请微信小程序账号（htpps：//mp.weixin.qq.com/）

2.登录成功之后 会看到小程序发布流程
点击<开发>
自己创作提交开发版本 提交审核发布小程序为体验版本
注意唯一的appID

3.微信小程序工具

3.1下载微信工具 打卡之后是二维码

3.2添加创建小程序

4-创建第一个小程序
创建项目预览

要注意云服务区别：简单来说云开发使用比较复杂，是一个比较完善的小demo。不使用就是一个简单的JavaScript。
4.1页面介绍

4.2项目组成（目录文件）

4.3page.json 文件
（针对微信小程序全局的配置）

4.4index.html

pages 注册页面
window 窗口信息
5.主页设置
把新建的文件路径调到最上面那就是主页了，意思就是，第一个路径就是首页的路径!

二.微信小程序之Flex-Direction

1.布局 盒子模型

Div宽度=边框+内空隙+内容宽度
Div高度同理
2.FLEX布局
flex-direction 决定主轴的方向
row：从左到右
row-reverse：从右到左
colums：交叉轴方向 从上到下

.box-1{
  flex-direction: column-reverse;
}

3.新建一个页面

4.新建文件添加内容

flex-wrap
nowrap:不换行
wrap：换行
wrap-reverse：反向换行

.box-2{
  flex-direction: row;
  flex-wrap:wrap-reverse;
}

flex-flow
是上面两个的集合
第一个值是direction
第二个值是wrap

.box-3{
  flex-flow: row rap;
}

justify-content
基于主轴上内容排列
flex-start：左对齐
flex-end：右对齐
center：居中对齐
space-between 两边对齐 中间空隙平分
space-around：每个元素两边完全相等

.box-4{
		justify-content:space-around;
}

三.基本语法

小程序的模板语法约等于vue的模板语法

1.文本渲染

{{ msg}}可以执行简单的js表达式
{{2+3}}
{{msg.length}}

2.条件渲染

wx:if=""
wx:elif=""
wx:else

3.列表渲染

wx:for="{{list}}"
wx:key="index"
	{{item}}
	{{index}}

4.自定义列表渲染
定义item与index的名称

wx:for="{{list}}}"
wx:for-item="myitem"
wx:for-index="myidx"
{{myidx}}
{{myitem}}

5.导入

import 只能导入template内容 template/utils.wxml < template name=“userCart”>
用户名：{{name}} < /temlate> home.wxml < import
src=“/template/utils.wxml”> < tempate is=“userCart” data=“{{…u1}}”>

include 只能导入非template内容 template/foot.wxml < view> {{内容}} </ view>
home.wxml < include src=“/template/foot.wxml”>

6.wxss

默认单位是rpx
750rpx 等于一个屏幕的宽
375就是50%的宽

7.事件

bindInput     表单输入时
bindconfirm    表单输入确认
bindtap      点击时候

8.内置组件

view         组件块组件
text         组件行内组件
button       组件按钮
input        组件表单

9.事件的传参

<button data-msg="xxx" bindtap="tapHd">
获取事件的参数  e.target.dataset.msg

10.表单的绑定

<input value="{{s1}}" bindinput="inputHd">
inputHd(e){
 this.setData({s1:e.detail.value})
}
表单的值获取：e.detail.value

11.内置api
显示设置

• showToast
  本地存储
• wx.setStorageSync(key,value)
  本地取
• wx.getStorageSync(key)
• wx.request 网络请求
  12.生命周期

onLoad 							页面加载完毕
onPullDownRefresh 				下拉刷新
onReachBottom					 触底更新