wechat_微信小程序的学习笔记

目标

一、初识小程序

1、小程序简介

什么是小程序？

  伴随着移动互联网的不断发展，用户这所谓的“流量”便成为了国内各大企业竞争的对象。因此，为了能够聚集更多的流量来使用自己的APP，小程序这种开发快速，好推广，免安装，便捷使用的小软件便孕育而生。

小程序与普通网页开发的区别？

①、运行环境不同
  网页运行基于游览器环境当中
  小程序运行基于微信环境中
②、API不同
  由于运行环境的不同，所以小程序中无法调用DOM、BOM、的API。但是小程序中可以调用微信环境提供的各种API，例如：地理位置、扫码、支付等。
③、开发模式不同
  网页开发模式：游览器+代码编辑器。
  小程序则是有着自己的一套标准开发模式：申请小程序开发账号 ——安装小程序开发者工具——创建和配置小程序项目

二、安装并创建小程序项目

1、注册小程序开发账号（目的：获取AppID）

  使用游览器打开https://mp.weixin.qq.com/网址，点击右上角“立即注册”去注册小程序开发账号。流程如下图所示：

选择注册小程序

填写账号信息

提示邮箱激活

点击链接激活账号

选择主体类型为个人

主体信息登记

获取小程序的AppID

2、安装小程序开发者工具

推荐下载和安装最新的稳定版(Stable Build)的微信开发者工具，下载页面的链接如下:
https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html

3、创建和配置小程序项目

微信扫码登录

选择小程序，点击白色方框加号可以开始创建小程序

创建前，可以为开发者工具做一些外观和代理的设置

三、学习小程序项目构成与页面构成

1、项目基本组成结构

2、页面由几部分组成

四、学习小程序中常见的组件使用方式

1、view

在小程序中view相当于html中的div标签。

<view class="content">我相当于div标签</view>

2、text

在小程序中text相当于html中的span标签。

<text>我相当于span标签</text>

3、image

在小程序中image相当于html中的img标签。

<image src="/imgs/....." mode="widthFix"></image>

mode属性请参考：https://developers.weixin.qq.com/miniprogram/dev/component/image.html

4、navigator

在小程序中navigator相当于html中的a标签。

<navigator url="当前小程序内跳转的路径" open-type="switchTab">我相当于a标签</navigator>

open-type属性请参考：https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

五、学习小程序各个模板、配置以及网络请求的使用

1、WXML模板语法

①、data中的定义

②、渲染data数据

③、标签内属性的绑定

④、三元运算

⑤、算数运算

⑥、事件绑定

⑦、给data重新赋值

⑧、事件传参

⑨、条件判断

⑩、wx:for循环的使用

2、WXSS模板样式

①、rpx实现原理

②、@import导入外部样式

3、全局配置

①、常用配的置项

②、小程序窗口的组成部分

③、window节点的配置项

④、开启下拉刷新功能以及设置loading样式

⑤、tabBar的组成和配置项

4、页面配置

①、页面中常用的配置项

5、网络数据请求

①、接口请求的两个限制

②、配置request合法域名

③、发起get请求

④、发起post请求

⑤、跳过合法域名校验的设置

⑥、为防止异步回调地狱，将原生的请求修改成promise请求

六、页面刷新时加载请求数据

六、进一步学习

1、页面导航

①、后退导航

②、导航到tabBar页面的设置

③、声明式导航传参

④、编程式导航传参

⑤、onLoad中接收导航参数

2、页面事件

①、监听下拉刷新事件

②、停止下拉刷新的效果

③、监听页面的上拉触底事件

④、对上拉触底进行节流

3、生命周期

4、WXS脚本

5、小程序中使用npm包

①、npm安装vant-weapp

npm安装weapp


步骤三忽略不计

如果没有包管理文件，可以通过npm init -y初始化一个package.json文件。

②、npm安装api promise化的包

6、子父组件通信

①、父组件向子组件传递数据

//父组件通过调用子组件的标签你传递一个变量aaa,值为a234a

//子组件通过properties方法，接收父组件传递过来的数据
//通过两个变量来接收 type和value

②、子组件向父组件传递数据

//通过this.triggerEvent方法给父组件传递数据

//在父组件调用子组件的标签中绑定自定义事件，用来获取子组件传递过来的数据

7、动画

8、轮播图的制作

七、了解小程序宿主环境

1、宿主环境简介

2、通信模式

3、运行机制

4、组件

5、API

八、学习小程序如何进行协同开发和发布

1、协同工作

2、小程序成员管理

3、小程序的版本

4、发布上线

5、运营数据