微信小程序

微信小程序

准备工作

注册小程序帐号

① 准备一个微信号（你如果还没有微信号，你out了，你是穿越来的吧）

② 申请小程序账号：https://mp.weixin.qq.com/wxopen/waregister?action=step1
（过程中使用的邮箱不要与微信有关联）

获取开发密钥（appId）

在做项目时需要密钥

公众平台登录小程序->开发->开发设置->AppID(小程序ID) wx1481c0459dc80dab

安装开发工具

开发工具，可以选择自己喜欢的，也可以选择微信工具，下载微信开发工具，微信开发工具可完成开发，调试，打包，部署的工作

目录结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

默认的目录结构：

1、全局文件

​ app开头的文件名是全局文件（文件名不能），包括app.js、app.json、app.wxss。

​ app.js：是全局的js文件，里面的变量可以在任何地方使用。

​ app.json：是对小程序的全局配置。

​ app.wxss：是全局样式。

2、页面级文件（pages文件夹下）

​ 如：pages/index下。index.js、index.json、index.wxml、index.wxss。这四个文件名必须一样。

​ index.js：页面js文件，启动后需要先执行【必须有】

​ index.json：页面配置文件。只能配置窗口项。决定当前窗口表现

​ index.wxml：页面布局文件，相当于html 【必须有】

​ index.wxss：页面样式文件。当index.wxss里的样式和全局的app.wxss的样式冲突时，以index.wxss为准。

文件类型

.wxml, .wxss, .json, .js 文件的作用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UI1xijis-1617707135711)(file:///C:\Users\31759\AppData\Local\Temp\ksohtml25640\wps8.jpg)]

① WXML（WeiXin Markup Language）文件

wxml模板：跟网页中的html是完成同样的功能。

wxml和HTML的不同之处

A. 标签名不同: wxml把常用的标签进行了封装，如：地图()等等

B. 采用mvvm的模式（如同react和vue一样），js中不直接操作DOM，只操作数据，所以，wxml中就出现了类似于vue中的指令：如：wx:if等

② WXSS文件

​ 和网页开发中的css一样，但是进行了扩展.

​ wxss在css的基础上扩展了哪些？

1、新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。

2、提供了全局的样式和局部样式，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。

3、此外 WXSS 仅支持部分 CSS 选择器，详细参考：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html

③ JS文件

JS文件不用解释，就是我们的js文件，完成交互的。

④ JSON文件

配置文件：

App.json：是小程序配置：

https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/code.html#JSON-%E9%85%8D%E7%BD%AE

project.config.json：工具配置

page.json：页面配置

开发文档

框架 组件 API

框架（mina框架）

​ 微信客户端给小程序所提供的环境为宿主环境，小程序的运行环境分成渲染层(webview)和逻辑层(jscore)，WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层,小程序的渲染层和逻辑层分别由2个线程管理，这两个线程的通信会经由微信客户端

配置

全局配置

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

app.json，对微信小程序进行全局配置(页面管理，窗口设置，网络请求)

页面配置

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

pagename.json，对本页面的窗口表现进行配置，覆盖全局

项目环境配置

sitemap.json，project.config.json

1）、project.config.json是项目开发环境配置， 包括版本、依赖、程序名之类 。

2）、sitemap.json： 配置小程序内的搜索， 当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引 。 用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。 爬虫访问小程序内页面时，会携带特定的 user-agent：mpcrawler 及场景值：1129 。

​ 如果想全局禁用索引，配置project.config.json，在 setting内部添加checkSiteMap:false,

wxml（官方组件)

https://developers.weixin.qq.com/miniprogram/dev/component/

1、视图容器（View Container）

view	视图容器 （相当于原来的div 块级标签）
text（相当于行内标签）
scroll-view	可滚动视图容器
swiper	可滑动的视频容器
  1.如何让swiper适应图片的宽高

swiper 的属性

image 图片标签

2、基础内容（Basic Content）

​ icon 图标

​ text 文字
​ progress 进度条
rich - text 富文本标签

3、表单组件（From）

​ (一)、button 按钮

​ form 表单
​ input 输入框
​ checkbox 多项选择器

​ radio 单项选择器

​ picker 列表选择器
​ slider 滑动选择器
​ switch 开关选择器
​ label 标签

4、操作反馈组件（Interaction）

​ action-sheet 上拉菜单
​ modal 模态弹框
​ toast 短通知

5、导航（Navigation）

​ navigator 应用内跳转

6、多媒体（Media）

​ audio 音频
​ image 图片
​ video 视频

7、地图（Map）

​ map 地图

8、画布（Canvas）
**9

wxss（样式）

WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

CSS 相比，WXSS 扩展的特性有：

​ 尺寸单位

​ 样式导入

1、WXSS尺寸单位

rpx尺寸单位可以根据屏幕宽度进行自适应。

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准

如：

ss

bb

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-giFxB2Dc-1617707135712)(file:///C:\Users\31759\AppData\Local\Temp\ksohtml25640\wps2.jpg)]

2、WXSS样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

在根目录上建立 styles 文件夹，在文件夹内写出相应的页面

3、WXSS内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

4、WXSS选择器

目前支持的选择器有：

5、WXSS全局样式与局部样式

​ 定义在 app.wxss 中的样式为全局样式，作用于所有页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

js（逻辑）

App()和page()

App()是注册小程序的，Page() 是注册页面的，都接受一个 Object 参数，App() 必须在 app.js 中调用，Page()必须出现在页面.js中，必须调用且只能调用一次，都会给当前注册生命周期钩子，和实例成员(方法、属性)

Object 参数

• data:{} 数据
• 钩子函数(参数){this 指向当前页面，当前小程序}
• 自定义函数(){ this 指向当前页面，当前小程序 }
• 自定义属性:值

页面与主程通讯

pages里面 let app=getApp(), app.实例属性|方法

数据绑定

WXML 中的动态数据均来自对应 Page 的 data。

在WXML里使用双花括号即可。双括号里可以写变量，表达式（包括三元表达式）

1、组件内容绑定使用（双花括号）将变量包起来

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Neg4YXe8-1617707135714)(file:///C:\Users\31759\AppData\Local\Temp\ksohtml25640\wps9.jpg)]

2、组件属性(需要在双引号之内，并写上双花括号)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ImvhzdaC-1617707135715)(file:///C:\Users\31759\AppData\Local\Temp\ksohtml25640\wps10.jpg)]

列表渲染

​ 1）、wx:for 指令完成列表渲染。

​ 格式：wx:for="{{数组}}"

​ 默认数组的当前项的下标变量名默认为 index，当前项的变量名默认为 item

​ 如：<组件 wx:for="{{数据}}">{{item}}/{{index}}</组件>

​ 2）、自定义下标名和当前项的名字：

​ 使用 wx:for-item 可以指定数组当前元素的变量名，

​ 使用 wx:for-index 可以指定数组当前下标的变量名：

​ 3）、将 wx:for 用在标签上，以渲染一个包含多节点的结构块

​ block 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。 在渲染结束后，会自动结束消失

条件渲染

1）、wx:if 指令完成条件渲染(当标签不频繁切换的时候)

<组件 wx:if="{{布尔数据}}"> 惰性渲染 （相当于vue的 v-if）

wx:elif="{{}}"

wx:else="{{}}"

2）、hidden属性（当标签频繁切换的时候，不要和display一起使用，如果要使用的时候，用wx：if）

<组件 hidden="{{布尔数据}}" 适合频繁渲染 ，true表示隐藏，false表示显示 （相当于vue的 v-show）

3）、也可以使用

数据修改

this.setData({key:value})，响应式的显示在view层，数据的修改结果是异步的

注意：

直接修改数据，不会响应式，如：this.data.属性 = 值 修改， view层不实时响应

app.setData({key:value}) 修改的是主程app

事件

基本格式

• 冒泡方式的绑定事件使用bind

<组件 bindxxx="实例方法"></组件>

xxx==原生移动端事件名(touchstart/touchend/touchcancel/touchmove/tap)

• 不冒泡方式的绑定事件使用catch

<组件 catchxxx="实例方法"></组件>

事件对象

直接在事件处理函数里声明形参既可以。
点击修改数据，加减，传参

如：

 //.wxml
 
 <text bindtap="clickMe" >点我</text>
 
 //.js
 
  clickMe(event){
      console.log(event);
      console.log(event.currentTarget);//就是当前事件源
  }

传参（小程序事件传参必须使用data-名 = “值”）

​ 事件处理函数传参时，在组件里写上属性 data-名 = “值”，在函数里，使用 event.currentTarget.dataset.参数名 获取数据。

<组件 bindxxx="实例方法" data-参数名称="值"></组件>

值： 字符

//实例方法
function(event){
    event.currentTarget.dataset.参数名称;
}

双向绑定

<input value="{{ipt}}" bindinput="checkIpt"></input>

 checkIpt(e){
    this.setData({ipt:e.currentTarget.value});//双向绑定
  },

生命周期钩子函数

小程序生命周期

一、 应用生命周期（是一个文件，也就是入口文件 app.js文件）

具体功能及应用常景代码如下：

// 应用生命周期
  //1,应用第一次启动就会出发的事件
    onLaunch(){
      //在应用第一次启动就会获取到用户的个人信息
      console.log( "onLaunch");
      
    },
    //2. 应用第一次被用户看到是出发的生命周期（从后台切回来，触发onShow）
      onShow(){
        //主要用于 对应用的数据或页面效果 进行重置
        console.log("onShow");
      },
      //3.应用隐藏的时候触发的钩子函数 (切后台)
      onHide(){
        // 主要用于 当用户进入后台一些页面（钱包等），页面的计时器就要清除，在hide中清除
        console.log("Hide");
      },
      //4.应用的代码发生报错的时候触发，有参数err  返回打印的错误
      onError(err){
        //用于应用的代码发生报错的时候触发，收集用户的错误信息，通过异步请求发送给后端（版本升级，修复代码）
        console.log("onerry");
        console.log(err);
      },
      //5. 页面找不到就会触发
      //应用第一次启动时，如果找不到第一个入口文件的话就会触法
      onPageNotFound(){
        //如果找不到第一个入口的文件的话，通过js的方式进行跳转到自定义的页面（不能跳tabbar页面，与导航组件类似）
        //js 跳转
        wx:wx.navigateTo({
          url: '/pages/zhifu/zhifu',
        })
        console.log("onPageNotFound");
      }

二、页面生命周期

 onLoad: function (options) {
    //onLoad发送异步请求，用来初始化页面的数据
      console.log("onLoad");
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    //在页面第一次加载完毕触发的钩子函数
    console.log("onRead");
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    //在页面展示的时候触发
    console.log("onShow");
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    //页面隐藏时候触发
    console.log("onHide");
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    //当页面关闭的是后会触发这个钩子函数的 <navigator url="../zhifu/zhifu"> 去支付  </navigator> 使用编程shi跳转其他页面的时候 就是卸载页面
       console.log("onUnload");
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    //监听用户下拉动作 用于页面的数据或效果重新获取更新是使用
    console.log("onPullDownRefresh");
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    //上拉触底事件的处理函数 要让页面出现上下的滚动条，当滚动条触底的时候触法
    //用于上啦加载下一页的时候在这做处理
    console.log("onReachBottom");
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    //用户点击右上角分享时候触法
    console.log("onShareAppMessage");
  },
  onPageScroll(){
    //当页面滚动的时候触发
    console.log("onPageScroll");
  },
  onResize(){下·
    //当页面尺寸发生变化的时候触发
    //场景：当小程序发生了手机横屏竖屏切换的时候触发
    console.log("onResize");
  },
  onTabItemTap(){
    //这个事件只存在在tabbar 页面时候才会触发
    //并且是在点击自己的tabitem的时候才会触法
    console.log("onTabItemTap");
  }

https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html

App(Object object)

注册小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。

App() 必须在 app.js中调用，必须调用且只能调用一次。不然会出现无法预期的后果。

onLaunch(Object object)
小程序初始化完成时触发，全局只触发一次。参数也可以使用 wx.getLaunchOptionsSync 获取。
参数：与 wx.getLaunchOptionsSync 一致

onShow(Object object)
小程序启动，或从后台进入前台显示时触发。也可以使用 wx.onAppShow 绑定监听。
参数：与 wx.onAppShow 一致

onHide()
小程序从前台进入后台时触发。也可以使用 wx.onAppHide 绑定监听。

页面的生命周期

https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

属性	类型	默认值	必填	说明
data	Object			页面的初始数据
onLoad	function			生命周期回调—监听页面加载
onShow	function			生命周期回调—监听页面显示
onReady	function			生命周期回调—监听页面初次渲染完成
onHide	function			生命周期回调—监听页面隐藏
onUnload	function			生命周期回调—监听页面卸载
onPullDownRefresh	function			监听用户下拉动作
onReachBottom	function			页面上拉触底事件的处理函数
onShareAppMessage	function			用户点击右上角转发
onShareTimeline	function			用户点击右上角转发到朋友圈
onAddToFavorites	function			用户点击右上角收藏
onPageScroll	function			页面滚动触发事件的处理函数
onResize	function			页面尺寸改变时触发，详见 响应显示区域变化
onTabItemTap	function			当前是 tab 页时，点击 tab 时触发

路由

声明式路由

组件：navigator

属性: open-type

值：

• navigate,redirect 只能打开非 tabBar 页面

• switchTab 只能打开 tabBar 页面。

• reLaunch 可以打开任意页面

• navigate 新+页面栈

• redirect 会替换当前栈

• navigateBack 当前页面出栈

• switchTab 目标tabBar页面入栈 关闭其他所有非 tabBar 页面

• reLaunch 全部出栈，目标页面栈入栈

• exit 全部出栈，无进栈 target="miniProgram"时生效

路由传参

​ url="/pages/xx/xx?a=1&b=2" switchTab 不能传参数

接参

app.js onLaunch(options) options={a:1,b:2}

pages.js onLoad(options) options={a:1,b:2}

编程式路由

1）、wx.redirectTo(object)
关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面

如：

Wxml文件：
<button bindtap="toOther" >跳到other</button>

Js文件:
toOther(){
    console.log("toOther");
    wx.redirectTo({
        url: "../../pages/other/other",// 注意这个相对路径：朝回返两级，也不能出现在tabBar里
        success: function () {
            console.log("到other了");
        },
        fail: function (e) {
            console.log("失败了，other");
            console.log(e);
        }
    });
},

2）、wx.switchTab(object)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

注意：只能跳到出现在tabBar的页面里，其它页面不行。

https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html

如：
App.json里的tabBar的配置：

"tabBar": {
    "list": [
        {
            "pagePath": "pages/index/index",
            "text": "首页"
        },
        {
            "pagePath": "pages/goodslist/goodslist",
            "text": "商品列表"
        }
    ]
}

注意：没有other，有index

goodslist.Wxml文件：

<button bindtap="toIndex" >回到index</button>
<button bindtap="toOther" >跳到other</button>

goodslist.Js文件：

toIndex: function () {
    wx.switchTab({
        url: '../../pages/index/index', //这个能够成功，因为，index在tabBar里的list属性里有。
    })
},
toOther() {
    console.log("toOther");
    wx.switchTab({
        url: "../../pages/other/other", //不能跳转，因为，other没有出现在tabBar的list属性里。
        success: function () {
            console.log("到other了");
        },
        fail: function (e) {
            console.log("失败了，other");
            console.log(e);
        }
    });
},

其它的由各位亲爱的同学们，自己仔细，细心地研究（锻炼自学能力噢……）

人机交互

1）、wx.showToast({})

显示消息提示框

如：
Wxml文件：

<button bindtap="regCheck" >注册</button>

Js文件：

regCheck(){
    wx.showToast({
        title: "注册成功",
        icon: "success",
        duration: 500,
        mask: true
    })
},

2）、wx.showModal({})

显示模态对话框

如：
Wxml文件：

<button bindtap="deleteInfo" >删除</button>

Js文件：

deleteInfo(){
    wx.showModal({
        title: '微信小程序',
        content: '确认要删除吗',
        success: function (res) {
            if (res.confirm) {
                console.log("你确认了");
            } else if (res.cancel) {
                console.log("你取消了");
            }
        }
    })
},

3）、显示loading提示框

wx.showLoading({})显示等待提示框，需主动调用wx.hideLoading 才能关闭

wx.hideLoading({})隐藏 loading 提示框

如：

wxml代码：

<button bindtap="getData" >获取数据</button>

js代码：

  getData(){
    //显示loading
    wx.showLoading({
      title: 'loading……………………',
    })
    // 发送请求
    setTimeout(function(){
      // 响应回来，隐藏loading
      wx.hideLoading();
    },2000);

  },

4）、显示操作菜单
wx.showActionSheet({})显示操作菜单

数据交互

1、请求本地模拟数据

小程序目前是一定要请求https的数据，如果想要请求本地数据需要对数据进行操作。

1）．Json数据：

新建.js文件，写json数据

var local_database = [

{数据。。。。。}

]

module.exports = { //数据暴露出去

postList: local_database

}

2）．使用json数据：

在需要使用数据的页面js中引用

var postsData=require(’…/…/data/posts-data.js’); //引入

在生命周期的onLoad函数中使用this.setData({})进行数据赋值

2、request数据请求

发起 HTTPS 网络请求。request({参数：值})

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GChyuZhn-1617707135715)(file:///C:\Users\31759\AppData\Local\Temp\ksohtml25640\wps13.jpg)]

1)、request数据请求真实接口数据

每个微信小程序需要事先设置一个通讯域名，小程序只可以跟指定的域名与进行网络通信。

否则会出现如下错误：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Oz9dDC17-1617707135716)(file:///C:\Users\31759\AppData\Local\Temp\ksohtml25640\wps14.jpg)]

如何设置： 选中自己的登录头像 选择登录信息 进行合法域名设置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sregoFdS-1617707135716)(file:///C:\Users\31759\AppData\Local\Temp\ksohtml25640\wps15.jpg)]

注意：

域名不能使用 IP 地址或 localhost；

域名必须经过 ICP 备案；

2)、request请求mock数据

没有服务器怎么请求数据？那就跳过域名校验。

​ 在微信开发者工具中，可以临时开启 ****开发环境不校验请求域名****、TLS版本及HTTPS证书 选项，跳过服务器域名的校验。此时，在微信开发者工具中及手机开启调试模式时，不会进行服务器域名的校验。

如下步骤：

在微信开发工具中 点击设置-》项目设置 就可以正常使用接口

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DQg4b5Ua-1617707135716)(file:///C:\Users\31759\AppData\Local\Temp\ksohtml25640\wps16.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QZzZdAm9-1617707135716)(C:\Users\31759\AppData\Roaming\Typora\typora-user-images\1599041100880.png)]

选中：“不校验合法域名、web-view………………”

在代码中就可以使用json-server数据：

onLoad: function () {
    wx.request({
        url: 'http://localhost:3000/goods',
        header: {
            'content-type': 'application/json' // 默认值
        },
        success(res) {
            console.log(res.data)
        }
    })
}

post请求，需要设置请求头

header: {
‘content-type’: ‘application/x-www-form-urlencoded’
}

自定义组件

一、如何配置组件文件夹

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

(1) 组件模板和样式

(2) Component 构造器

(3) 组件间通信与事件
（一）、父传子 ：下图所示

（二）、子传父
子组件通过触发事件传值如：点击事件
父组件在子组件的标签上绑定传递过来的自定义事件

子向父传递的自定义事件（zc），和传递的参数（index）

this.triggerEvent("zc",index)

父组件在子组件的标签上 绑定子组件传递过来的自定义事件

 <Bunner neirong = "{{yangshi}}" bindzc="zc"></Bunner>

在父组件的js代码内 可以通过事件的 zc（e），获取到传的参数

  zc(e){
        //  获取到子组件传来的下标
           let index =  e.detail
        //    将当前数组的数组获取到并负值给arr
              let arr = this.data.yangshi
  },

拓展 slot 插槽 占位符

slot占据位置，父组件传内容 使用 block 占位符

父组件

<text>我的页面</text>
 <navigator url="../zhifu/zhifu"> 去支付  </navigator>
 <Bunner neirong = "{{yangshi}}" bindzc="zc">
   <block wx:if="{{yangshi[0].isactive}}">我是首页</block>
   <block wx:elif="{{yangshi[1].isactive}}">我是原创</block>
   <block wx:elif="{{yangshi[2].isactive}}">我是分类</block>
   <block wx:elif="{{yangshi[3].isactive}}">我是关于</block>
   <block wx:elif="{{yangshi[4].isactive}}">我的我的</block>
 </Bunner>

子组件

   <view>
     <slot></slot>
    </view>

(4) 组件生命周期
(5) behaviors

(6) 组件间关系

(7) 数据监听器

(8) 纯数据字段

1、定义

不是创建page，而是创建component，一个小程序组件（wxml,wxss,js,json)

//组件名.js
Component({ //构造一个组件
   //组件的属性列表,相当于vue组件的props
  properties:{
    title:{ //属性名
      type:String,//类型
      value: '默认值'
    }
  }
  //组件数据，内部状态
  data:{ 
  	msg:'..'
    num1:1,
    num2:2,
    sum:3
  }
          
  methods:{ //组件方法
    show(){
  		console.log(this.data.msg/this.properties.title)
  		this.setData({msg:...}) / properties 不可修改
	 }
  }
  //组件监听器
    observers: {
    'num1, num2': function(num1, num2) {
      // 在 num1 或者 num2 被设置时，执行这个函数
      this.setData({
        sum: num1 + num2
      })
    }
    
})

2、注册

全局注册 app.json , 到处可用(page,component)

"usingComponents":{
  "使用时的组件名":"components/comp1/comp1"
}

局部注册 pagename.json ，当前页面可以

"usingComponents":{....}

组件内注册组件, 当前组件可用

"usingComponents":{....}
"component": true, // 当前组件可以套用组件

3、使用

<comp1 title="{{值}}"></comp1>

API

小程序 的API基本上都是以wx.开头的。

(1) 基础

wx.getSystemInfoSync

wx.getSystemInfo

(2) 路由

wx.switchTab

wx.reLaunch

wx.redirectTo

wx.navigateTo

wx.navigateBack

(3) 界面交互：

wx.showToast

wx.showModal

wx.showLoading

wx.showActionSheet

wx.hideToast

wx.hideLoading

(4) 导航栏：

wx.setNavigationBarTitle

(4) 网络

wx.request

(5) 数据缓存

wx.setStorageSync

wx.setStorage

wx.removeStorageSync

wx.removeStorage

wx.getStorageSync

wx.getStorageInfoSync

wx.getStorageInfo

wx.getStorage

wx.clearStorageSync

wx.clearStorage

骨架屏

https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html

小程序的框架

mpvue：美团点评团队出品的小程序开发框架：mpvue，是“基于Vue”的框架的。mpvue是从整个Vue的核心代码上经过二次开发而形成的一个框架，相当于是给Vue本身赋能，增加了开发微信小程序的能力。

wepy：WePY是在代码开发风格上借鉴了Vue，本身和Vue没有什么关系。

mpvue

介绍及其特点

1．mpvue的介绍：

mp:mini program

Vue:就是vue了

Mpvue就是把用vue的技术体系开发小程序的框架。

2．mpvue框架的优点：

比起原生小程序的开发，或者说，在目前原生小程序开发的基础上，我们可以有更多地获取到这样一些能力：

**· 彻底的组件化开发能力：**提高代码（原生小程序没有，这个很重要，小程序把那个啥和那个啥分开了）

· 完整的 Vue.js 开发体验（学过vue后，开发小程序，so easy）

· 方便的 Vuex 数据管理方案：方便构建复杂应用（这个很重要）

· 快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotReload（这是前端必备）

· 支持使用 npm 外部依赖（这是前端必备）

· 使用 Vue.js 命令行工具 vue-cli 快速初始化项目

· H5 代码转换编译成小程序目标代码的能力

它的目标是：在未来最理想的状态下，可以一套代码可以直接跑在多端：WEB、微信小程序、支付宝小程序、Native（借助weex）

环境搭建和第一个程序：

1、安装nodejs，vue-cli

2、创建mpvue的项目：vue init mpvue/mpvue-quickstart 项目名称

假如，项目名称为mpvueprj。则运行如下命令，

vue init mpvue/mpvue-quickstart mpvueprj

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nZgUSm58-1617707135716)(file:///C:\Users\31759\AppData\Local\Temp\ksohtml25640\wps19.jpg)]

都默认回车吧

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NT3CzXpE-1617707135717)(file:///C:\Users\31759\AppData\Local\Temp\ksohtml25640\wps20.jpg)]

项目建好了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5z7RQmRt-1617707135717)(file:///C:\Users\31759\AppData\Local\Temp\ksohtml25640\wps21.jpg)]

3、进入项目目录，安装依赖：npm i

4、Npm run dev后，进入开发模式，就会自动产生目录dist。Dist目录是编译产生的小程序的代码。以后，写vue代码就行，小程序的代码就会自动产生。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DI8uvL0g-1617707135717)(file:///C:\Users\31759\AppData\Local\Temp\ksohtml25640\wps22.jpg)]

5、运行小程序。

需要打开微信开发者工具，来运行。

(1) 在微信开发者工具里，导入项目：

(2) 项目目录指向 mpvueprj

(3) 填入appId

(4) 点击“导入”按钮

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nEzWAaAi-1617707135717)(file:///C:\Users\31759\AppData\Local\Temp\ksohtml25640\wps23.jpg)]

(5) 如下效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M4SZoPc6-1617707135717)(file:///C:\Users\31759\AppData\Local\Temp\ksohtml25640\wps24.jpg)]

(6) 尝试修改vue组件，自动编译，小程序结果立即呈现

• Vue组件（index/index.vue）增加“hello”文字

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hso8DK2y-1617707135718)(file:///C:\Users\31759\AppData\Local\Temp\ksohtml25640\wps27.jpg)]

自动编译后，在微信开发者工具里小程序的结果立即呈现

![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yKgiijn5-1617707135718)(file:///C:\Users\31759\AppData\Local\Temp\ksohtml25640\wps29.jpg)]

wepy

WePY介绍

​ WePY 是 腾讯 参考了Vue 等框架对原生小程序进行再次封装的框架，更贴近于 MVVM 架构模式, 并支持ES6/7的一些新特性。
注意：WePY 2 是基于小程序原生组件实现组件化开发。因此 WePY 2 支持的最低版本小程序基础库为 1.6.3。
官网：https://wepyjs.github.io/wepy-docs/2.x/#/

WePY 版本

​ WePY 2 并不是基于 WePY 1 的升级版，而是完全重新开发的全新版本

WePY 安装和创建项目

WePY的安装或更新都通过npm进行。

• ​ 全局安装 WePY CLI 工具

  ​ npm install @wepy/cli -g

• ​ 使用 standard 模板初始化项目：

  ​ wepy init standard 项目名

• cd myproj

• npm install

• npm run dev 监听并且编译项目
  微信开发者工具导入项目（项目根目录），就可以预览效果了

四、报错
1、报错

怎么办？ 问题出在compiler-less的版本问题
需要把
compile-less 锁定到2.0.3，再把@wepy/cli更新到@wepy/cli@2.0.0-alpha.18

2、解决：
问题出在compiler-less的版本问题
需要把compile-less 锁定到2.0.3，
再把@wepy/cli更新到 @wepy/cli@2.0.0-alpha.18
在package.json中修改
重新cnpm install

微信小程序的实战开发

第三方的框架

二、创建文件夹，及小程序所有的页面

常用组件

（一）、text

image

轮播图 swiper

导航标签 navigator

button

button开放功能

radio

父组件向子组件传递数据

封装请求

上图是正常发送请求的代码！
封装前准备 在app文件的同级新建request文件夹，并新建文件index.js 内容如下

在页面中使用封装的请求时