第一次对于微信小程序的学习，主要是一些基础语法

微信小程序开发

1）项目的基本构成

1) 文件作用

pages存放所有小程序的页面
utils用来存放工具性质的模块（例如：格式化时间的自定义模板
app.js 小程序项目的入口文件
app.json 小程序项目的全局配置
app.wxss 全局样式文件
project.config.json项目的配置文件
sitemap.json 配置小程序及页面是否被微信索引

2）小程序页面的组成部分

index.js 数据，时间处理函数
index.json
index.wxss
index.wxml 模板结构

3）.json配置文件的作用

更目录的app.json文件 -> 全局配置文件
根目录中的project.config.json
根目录中的sitemap.json
每个页面文件夹的.json
app.json 全局配置文件

pages:[] 
记录当前小程序所有页面的路径
window:全局定义小程序所有页面的背景色，文字颜色等
style:全局定义小程序所使用的样式版本
sitemapLocation:用来指明sitemap.json的位置

默认只包含四项内容

4）project.config.json文件

是项目配置文件，用来对小程序开发工具的个性化配置

setting保存了编译相关的配置
projectname保存的是项目名称
appid中保存的是小程序的账号ID

5) sitemap.json文件

微信现已开发小程序内搜索，效果类似于网页的SEO.sitemap.json文件用来配置小程序页面是否运行微信索引

当开发者允许索引时，微信会以爬虫的形式，为小程序的页面内容建立索引，当关键字和页面的索引匹配成功的时候，小程序的页面将可能展示在搜索结果中

disallow 不允许索引

allow 允许索引

注意：清除黄色警告 ….当前页面…被索引

在project.config.json 中配置

1	checkSiteMap:false

6)页面的.json 文件

调整首页，即将当前路径改在最前

wxml (weixin markup language)是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作用类似于网页设计的html
html 和 wxml 的区别
1. 标签名称不同
  - html (div,span,img,a)
  - wxml (view ,text,image,navigator)
2. 属性节点不同
  - >超链接
3. 提供了类似Vue的模板语法
  - 数据绑定
  - 列表渲染
  - 条件渲染
4. 1
wxss 小程序样式语言
1. 新增rpx属性单位
  1. css里面需要进行像素单位换算，如rem
  2. wxss在底层支持新的尺寸单位，自动进行样式计算
2. 提供全局样式和局部样式
  1. 全局wxss
  2. 区别wxss
3. wxss仅仅支持部分css选择器
  1. class ,id
  2. element
  3. 并集选择器
  4. ::after 和 ::before 等伪类选择器
4. 1
小程序里面的js文件
1. app.js
  1. 整个小程序的入口文件，调用APP()函数来启动整个小程序
2. 页面的.js文件
  1. 页面的入口文件，通过调用Page()函数来创建并运行页面
3. 普通的.js文件
  1. 公共的函数或者属性供使用

7）小程序开发宿主环境

手机微信是小程序的宿主环境

……基于微信进行安装……

小程序借助，微信扫码支付，GPS

宿主环境提供的内容
1. 通信模型
2. 运行机制
3. 组件
4. API

8）通信模型

主体包括渲染层和逻辑层
1. WXML模板和WXSS样式工作在渲染层
2. js脚本工作在逻辑层
3. 。
通信
1. 渲染层和逻辑层之间的通信
  1. 为微信客户端进行转发
2. 逻辑层和第三方服务器的通信
  1. 为微信客户端进行转发

9）小程序运行机制

小程序启动的过程
1. 下载包到本地
2. 解析全局配置 app.json
3. 执行app.js入口文件，APP()
4. 渲染小程序首页
5. 小程序启动完成
页面的启动
1. 加载解析页面的.json配置文件，
2. 加载页面的.wxml模板和.wxss样式
3. 执行页面的.js文件，执行Page()创建页面实例
4. 页面渲染完成

10).小程序组件的分类

小程序的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。官方吧小程序的组件分为九类
1. 视图容器 *
2. 基础内容 *
3. 表单组件 *
4. 导航组件 *
5. 媒体组件
6. map地图组件
7. canvas画布组件
8. 开放能力
9. 无障碍访问

11)常见的视图容器类组件

view

普通视图区域，类似于div,是块级元素，常用来实现页面的布局效果
scroll-view

可滚动的视图区域

常用来实现滚动列表效果
swiper和swiper-item

轮播图容器和轮播图内容组件

view组件的基本使用

<view class='container'>
	<view>A<view>
	<view>B<view>
	<view>C<view>
<view>

.container{
	display:flex;
	justify-content:space-arround
}
.container view:nth-child(1){
	background-color:lightblue;
}

srcoll-view 使用

<scroll-view class="scroll" scroll-y>
	<view>A</view>
	<view><navigator url='../index/index'>B</navigator></view>
	<view>C</view>
</scroll-view>

.scroll{
    background-color: lightblue;
    /* width: 100px; */
    height: 100px;
}
.scroll view{
    height: 100px;
    width: 100px;
    background-color: rgb(167, 64, 64);
}

3.swiper 和 swiper-item的使用

autoplay
1

4.button

size
plain 镂空
type primary warn
open-type 跳转或者获取手机号
1

5.image

默认存在大小

```js

// /表示根目录


   3. 属性

      1. mode属性-指定裁剪和缩放
         1. 默认值：scaleToFill,不抱持丛横比，填满容器
         2. aspectFit:保持比例，完整显示，但是两边留白
         3. aspectFill:保持短边样式，即水平完整，垂直方向被裁剪
         4. widthFix:宽度不变，高度自适应，即宽度与原本容器的宽度一致
         5. heightFix:高度不变，宽度自适应,即高度与原本容器的宽度一致
      2. 2



## 12）小程序API

		由宿主环境提供

### api

1. 事件监听类API
   - 特点：以on开头，用来监听某些事件的触发
   - 举例：wx.onWindowResize(function callback)监听窗口尺寸的大小变换的事件
   - wx相当于window
2. 同步API
   - 以Aync 结尾的API
   - 同步API的执行结果都可以通过函数返回值直接获取，如果执行出错则会抛出异常
   - 举例：wx.setStorageSync('key','value')向本地存储中写入内容
3. 异步API
   - 特点：类似于jQuery中的$.ajax(options)函数，需要通过success,fail,complete接收调用的结果
   - 举例：wx.request(options)发起网络数据请求，通过successs回调函数接收数据
4. 1



## 13) 协同工作和发布

### 1）了解权限管理需求

对不同角色，不同岗位的员工的权限进行边界的划分，使其有效的进行协同工作

### 2）了解项目成员的组织结构

#### 项目管理者

统筹整个项目的进展和风险

1. 产品组
   - 提需求
2. 设计组
   - 出设计方案
3. 开发组
   - 代码开发
4. 测试组
   - 项目测试
5. 

 ### 3）开发流程

- 产品组--提出需求
  - 设计组--设计
    - 开发组--开发
      - 产品组和设计组--体验
        - 测试组--测试
          - 管理者--发布



### 4）成员管理的两个方面

#### 管理员

- 添加删除体验成员

- 管理所有成员，包括：
  1. 运营者
  2. 开发者
  3. 数据分析者
  4. 以上三者添加删除体验成员

#### 不同成员对应的权限

开发者权限：

1. 开发者权限
   - 对代码进行代码开发
2. 体验者权限
   - 使用体验版小程序
3. 登录，小程序后台
   - 管理后台
4. 开发设置权限
   - 管理设置
5. 腾讯云管理的权限
   - 云开发权限

#### 添加项目成员和体验成员

##### 查看小程序运营数据的两种方式

- 在小程序后台查看	
  - 登录后台 -统计-tab
- 使用小程序数据助手查看
  - 手机维修 -小程序数据助手 -查看
- 1







.

#### 版本管理

开发编写的为 ：开发版本

体验版本：体验测试

审核版本：只能有一部分代码处审核

线上版本：。。



小程序开发上线的整体步骤



## 14）模板与配置

### 1）模板语法

#### 1）数据绑定

- 定义数据

  - Mustache语法

  ```js
  data: {
          info:'勇往直前'
      },

1	<text>{{info}}</text>

Mustache应用场景
- 绑定内容
- 绑定属性
- 运算（三元，算术等）
绑定属性

1
2
3

data:{
    imgsrc:'...'
}

1	<image url="{{imgurl}}">

三元运算

1	<text>{{num>5?1:0}}</text>

算术运算

 num:Math.random()*10,
        num1:Math.random().toFixed()*10

//使用
<text>{{num*num1}}</text>

2）事件绑定

1.常见事件

tap 手触摸离开后的
- bindtap
- bind:tap
input 文本框的输入事件
- bindinput
- bind:input
状态改变时触发 eg:checkbox
- bindchange
- bind:change

2.事件对象的属性列表

type：事件leix
timeStamp: interger 数值类型，打开到触发的毫秒数
target 对象，触发事件的组件的一些属性的集合
cureentTarget object 当前组件的一些属性值集合
detail object 额外的信息
touches 数组触摸时间，当前停留在触目点信息的数组，多手指
changedTouches array 触摸事件，当前变化的触摸点信息的按钮

target 和 currentTarget 的区别

target是触发该事件的源头组件，currentTarget则是当前事件绑定的组件

eg:事件冒泡，子元素触发父组件的事件，此时target为子元素，currentTarget则是父级

bindtap事件

putnum(){
       this.setData({
           count:this.data.count+1
       })
   },

1	<button bindtap='putnum'>{{count}}</button>

注意：不能直接（）传递参数，可以直接拿到event，在事件中

事件传参

data-* 传递参数

1
2
3

<button bindtap='putnum'>{{count}}</button data-info="{{2}}">
//info为参数的名字
//2为参数的值

2 表示数2
”2“ 表示字符串2

拿到参数

this.setData({
            count:this.data.count+1,
            msg:e.target.dataset.msg
        })
//直接赋值无效
this.data.msg = e.target.dataset.msg;

bindinput事件

input 不显示光标 -> 长按

e.datail.value 拿到input的值

1	<input type="text" value="{{msg}}" bindinput='handleFirst'></input>

handleFirst(e){
     console.log(e.detail.value)
     this.setData({
         count:this.data.count+1,
         msg:e.detail.value
     })
 },

2.条件渲染

wx:if 和wx:elif和wx:else

wx：else不写条件

<view wx:if="{{isshow}}">女</view>
<view wx:else="{{!isshow}}">男</view>

//   
<view wx:elif="{{!isshow}}">男</view>

//条件渲染
    changesex(){
        console.log(this.data.isshow)
        this.setData({
            isshow:!this.data.isshow
        })
    },

block一次性控制多个组件的展示与隐藏

只是一个包裹性的容器，不会再页面中做任何渲染

<block wx:if="{{rtue}}">
	<view>view1</view>
	<view>view1</view>
	<view>view1</view>
</block>

hideen属性

1	<view hidden='{{isshow}}'>

v-show 和 v-if 的对比

运行方式不同
- if 动态创建和移除元素，控制元素的展示和隐藏
- hidden以切换样式的方式，控制元素的显示和隐藏（display:none/block）
- 频繁切换使用使用hidden更好
- 条件复杂时，使用wx:if
w

3.列表渲染

wx:for

1
2
3

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

1	list:['a','b','c'],

自定义索引和元素变量名

wx:for-index=””
wx:for-item=””

建议绑定key

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

eg:
list:[{id:'1',name:'11'}]

不需要Mustache语法

可以直接让index为key

1
2
3

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

4.样式导入

@import ‘….’

5.全局样式和局部样式

局部样式只作用当前页面

当样式冲突时，满足就近原则
当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局样式

2)全局配置

pages
1. 记录小程序所有页面的存放路径
window
1. window全局小程序窗口的外观
tabBar
1. 小程序底部的tabBar效果
style
1. 是否启用新版的组件样式

1.window

导航栏
- navigationBar-window配置
背景区域
- background-window配置
主体区域

2.window配置

下拉刷新不能自动合上，需要手动合上。
颜色只能为十六进制
下拉刷新loading的样式，三个小圆点。只有dark和light
上拉触底，距离底部多少时可以请求新的数据，一般不需要修改

tabBar配置

底部tabBar
顶部tabBar

注意点：

最少两个，最多五个
设置顶部时不会显示图标，只有文字

tabBar节点的配置项

tabBar节点中list的配置项

单独放在 images-tabs-..
图标名称包好-active的是选中之后的图标

3）页面配置

与全局配置文件的关系
- 可以实现每个页面不同的效果
- 页面配置不用写window，直接写配置
配置项同app.json
建议下拉刷新放在具体的页面

15）数据请求

只能请求https类型的接口
必须将接口的域名添加到信任列表
- 详情-项目配置-合法域名
配置合法域名-登录后台-开发-开发设置-服务器域名-修改request合法域名
注意事项
1. 域名只支持https协议
2. 域名不能使用ip地址或localhost
3. 域名必须经过ICP备案
4. 服务器域名一个月内最多可以申请修改五次

1）.发送get请求

//触摸事件
   tagFirst: function(e){
      this.sendget()
       console.log(e)
       wx.request({
           url: 'https://www.escook.cn/api/get',
           methods:"GET",
           data: {
             name: "zs",
             age: 20,
           },
           success:(res)=>{
             console.log(res)
           }
         })
   },
   sendget(){
       wx.request({
         url: 'https://devapi.qweather.com/v7/weather/now?',
         methods:"GET",
         data: {
           location: "119.41,30.58",
           key: "03ab5adfffc84f7dbd95c66c53ed6223",
         },
         success:(res)=>{
           console.log(res)
         }
       })
       
   },
       
       //如果都写在sendget里报错，第二个不在合法域名列表

同样get只能用data传参
页面加载需要的数据放在onload里

2）.跳过合法域名校验

http接口的协议
1

方法

详情-本地设置-不校验合法域名…

–仅仅能在开发调试阶段使用

3）跨越和ajax

不存在跨域

ajax

不叫ajax请求，叫网络数据请求

16）视图逻辑

1.导航跳转

声明式导航
编程式导航
1. 调用小程序的导航api

1.导航页面

navigator

url表示跳转的页面地址
- 路径必须以/开头
open-type 表示跳转的方式，switchTab–跳转tabBar页面，未写的话无法跳转

1 2	<navigator url='/pages/index/index' open-type="switchTab">111 </navigator>

但是跳转到logs就没效果,即switchTab只能跳tabBaar页面

其他页面，open-type:navigate,可以省略不写

后退导航

open-type:navigateBack
delta 表示后退的层级,为数字，默认为1

1	<navigator open-type='navigateBack' delta="1"></navigator>

指令

1.跳转到普通页面

 wx.navigateTo({

      url: '../logs/logs'
	//success 成功的回调
    //fail 失败的回调
   //complete 借口调用结束的回调,成败都会执行
     })

2.跳转到tabBar页面

1
2
3

wx.switchBar({
url:'...'
})

3.后退

wx.navigateBack({
    url:"",
    delta:1
    //默认为1，delta
    //其他属性同上
})

2.导航传参

1.声明式导航传参

2.编程式导航传参

在url参数后面传递参数

wx.navigateTo({
    url:"?a=a&b=2",
    delta:1
    //默认为1，delta
    //其他属性同上
})

3.在onload中接收导航参数

可以直接在onload中直接拿到

onload:function(options){
    console.log(options)
    //一般这个参数都会转移到data里面
    //query:{}
    this.setDate({
		query:options,
	})
}

2.页面事件

1.下拉刷新事件

定义：下拉滑动操作，重新加载页面数据

使用：

全局开启
1. enablePullDownRefresh:true
2. 不推荐
局部开启下拉刷新
1. 在页面的json文件中配置
2. enablePullDownRefresh:true
配置样式
1. backgroundColor:”” 下拉刷新的样式
2. backgroundTextStyle:”dark’ -loadding的样式
监听下拉刷新事件
1. 在内置的onPullDownRefresh
2. 刷新时触发的函数
上拉触底事件
1. 通过上拉滑动加载更多的数据–分类上用的较多
2. onReachButton() 函数
3. 可以调节触底距离，
  - 可以配置距离
  - onReachBottomDistance:50px;
  - 默认为50px

2.

17)自定义编译模式

优化开发过程
使代码的变化造成的效果以最方便的方式展示在我们面前
普通编译-添加编译模式-

18）生命周期

创建-运行-销毁的整个阶段

1.应用生命周期（函数）-小程序

在app.js声明

onLauch-小程序初始化执行，全局只触发一次
onShow-小程序启动，或从后台进入前台触发
onHide-小程序从前台进入后台触发

前台和后台

前台：小程序正在运行,home键

后台：调试旁边-切后台

2.页面生命周期(函数)-页面

页面的.js文件

onLoad
- options,
- 可以在此处获取数据
- 只会调用一次
- 加载数据，转存参数
onShow
- 展示的时候触发
onReady
- 监听页面初次调用完成，只调用一次
- 可以修改，eg:wx.setNavigationBarTitle
onHide
- 监听页面隐藏
onUnload
- 页面卸载
注意：onLoad,onReady

19）wxs脚本

定义：小程序独有的脚本语言，结合wxml,可以构建页面的结构

应用场景：wxml里面无法调用页面.js中定义的函数，但是wxml可以调用wxs中定义的函数，典型场景就是过滤器

不改变数据本身，只是在展示时根据需求自定义样式

1.wxs与js的区别

有自己的数据类型
- number,string,boolean,object,function,array,date,regexp
不支持es6
- 不支持let,const,结构赋值，对象简写，展开运算符，箭头函数，
- 支持var，普通函数写法
支持CommonJs规范
- module
- require()函数
- module.exports对象

2.wxs写法

内嵌wxs脚本

必须指定module属性，表示名称

<view>{{m1.toUppper(username)}}</view>

<wxs module='m1'>
module.exports.toUpperCase(str){
	return str.toUpperCase()
}
</wxs>

外联.wxs-类似于js
- module 脚本名称
- src 路径，必须为相对路径
1