微信小程序-快速入门

小程序提供了一个简单、高效的应用开发框架和丰富的组件及API，帮助开发者在微信中开发具有原生 APP 体验的服务。

微信小程序

微信账号分类：

开发工具

微信小程序开发，需要安装微信开发者工具使用特定语法进行开发

开发工具

1、开发者工具安装

安装过程没有什么其他特殊选择，注意安装的盘符大小合适就可以。

安装开发者工具，打开软件后的效果

使用自己的微信账号进行扫描登录，需要在手机端确认登录

2、生成项目包

点击确定按钮后,就会生成一个新的小程序包

3、项目包目录结构

在微信小程序开发过程中，需要使用到wxml定义结构和内容，wxss定义修饰样式，jsjavascript实现业务逻辑

1. .json 后缀的 JSON 配置文件
2. .wxml 后缀的 WXML 模板文件
3. .wxss 后缀的 WXSS 样式文件
4. .js 后缀的 JS 脚本逻辑文件

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

一个小程序page页面由四个文件组成，分别是：

4、配置文件

参考网址：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

app.json文件用来对微信小程序进行全局配置的，设置小程序页面数量、窗口表现、设置底部或顶部菜单、网络请求超时时间等。

app.json由于是json文件，所以其中不能添加任何注释，key和value字符串必须用双引号引起来，数组或对象最后一定不能有逗号。

常用的全局配置：

• debug：debug调试是否开启
• pages：注册小程序的页面路径列表

数组的第一项代表小程序的初始页面（首页）。小程序中新增/减少页面，都需要对 pages 数组进行修改。

• window：全局的默认窗口表现

用于设置小程序的状态栏、导航条、标题、窗口背景色

• tabBar：小程序底部或顶部菜单定义（换句话说，小程序的菜单是通过json配置来实现的）
• networkTimeout：小程序网络请求超时时间设置
• usingComponents：自定义组件配置

全局配置文档：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

4、tabBar底部菜单栏

微信小程序默认提供了，底部导航菜单栏的配置方式。使用app.json配置tabBar实现即可。

注意:

1、tabbar路径的page页面必须路径正确存在

2、显示选中和未选中的图片路径正确存在

3、切换到的页面是tab页面，才可以显示出底部导航菜单

app.json

"tabBar": {
    "color": "#333",
    "selectedColor": "#f66",
    "backgroundColor": "#f5f5f5",
    "borderStyle": "black",
    "list": [
      {
        "iconPath": "./assets/tabBar/shouye.png",
        "selectedIconPath": "./assets/tabBar/shouye1.png",
        "pagePath": "pages/home/home",
        "text": "首页"
      },
      {
        "iconPath": "./assets/tabBar/caidan.png",
        "selectedIconPath": "./assets/tabBar/caidan1.png",
        "pagePath": "pages/menu/menu",
        "text": "食谱"
      },
      {
        "iconPath": "./assets/tabBar/gouwuche.png",
        "selectedIconPath": "./assets/tabBar/gouwuche1.png",
        "pagePath": "pages/order/order",
        "text": "订单"
      },
      {
        "iconPath": "./assets/tabBar/user.png",
        "selectedIconPath": "./assets/tabBar/user1.png",
        "pagePath": "pages/user/user",
        "text": "我的"
      }
    ]
  },

5、常用生命周期函数

• 页面生命周期
• onShow()

页面显示/切入前台时触发。一个页面可以触发N次。

• onReady()

页面初次渲染完成时触发。一个页面只会调用一次。

• onHide()

页面隐藏/切入后台时触发。一个页面可以触发多次

• onUnload

生命周期回调—监听页面卸载

• 页面常见事件处理
• onPullDownRefresh
  监听用户下拉动作，此事件需要在app.json文件中window节点中“开启全局的下拉刷新“enablePullDownRefresh”:true,才能触发它  作用：下拉加载更多
• onReachBottom
  页面上拉触底事件的处理函数，需要当前页面内容超过一屏显示  作用：上拉加载更多
• onPageScroll
  页面滚动触发事件的处理函数，需要当前页面内容超过一屏显示  作用：滚动事件监听
• onShareAppMessage
  用户点击右上角转发，触发此方法，在此方法中可以自定义转发的内容。作用：自定义分享

6、导航方式

7、界面提示

微信小程序中提供了，界面提示的API方法。以下为常用的几个

// 界面提示
   // 加载中
   wx.showLoading({
     title: '加载中....',
  })
   setTimeout(()=>{
     wx.hideLoading()
  },2000)

   // 轻提示
   wx.showToast({
     title: '成功了',
  })

   wx.showToast({
     icon:"error",
     title: '失败了',
  })

   // 确认框
   wx.showModal({
     title: '确定购买吗?',
     content: '需要支付100元',
     complete: (res) => {
       if (res.cancel) {
         console.log('取消');
      }
       if (res.confirm) {
         console.log('确认');
      }
    }
  })

WXML语法

1、数据绑定

pages\info\info.wxml

<!-- 变量渲染 插值表达式 -->
 <view>
  {{msg}}
 </view>
pages\info\info.js

// pages/info/info.js
Page({
 /**
  * 页面的初始数据
  */
 data: {
   msg:'好开心，又要上班了,又要上学了'
},

 /**
  * 生命周期函数--监听页面加载
  */
 onLoad(options) {
   console.log(this.data.msg);
   // this.data.msg = 'msg被修改了'
   console.log(this.data.msg);
   // 定时器
   setTimeout(()=>{
   // 渲染修改后的数据,需要通过setData
     this.setData({msg:'真的栓Q'})
  },3000)
},
})

2、循环遍历

pages\info\info.wxml

<!-- 2、循环遍历 -->
 <view>
   <view wx:for="{{skills}}" wx:key="index">
   <!-- 默认item代表值 index代表下标或者key -->
    {{index+1}}、{{item}}
   </view>
   <!-- 修改默认的index和item变量 -->
   <view wx:for="{{skills}}" wx:for-index="i" wx:for-item="val" wx:key="i">
   <!-- 调用修改后的下标变量和值变量 -->
    {{i+1}}、{{val}}
   </view>
 </view>
pages\info\info.js

/**
  * 页面的初始数据
  */
 data: {
   msg:'好开心，又要上班了,又要摸鱼了',
   skills:['html','css','javascript','vue','react','miniprogram']
},

3、判断

属性是：wx:if、wx:elif、wx:else

pages\info\info.wxml

<!-- 根据isOnLine状态显示在线或者离线 -->
 <view>
   <view wx:if="{{isOnLine}}">
    在线
   </view>
   <view wx:else>
    离线
   </view>
 </view>

4、模板包含和引用

4.1、包含include

①建立一个wxml模板文件  复用的代码文件

template\header.wxml

<view> 头部内容 </view>

②哪里使用在哪里引入就可以

include标签引入的位置显示

pages\info\info.wxml

<!-- include引入文件 --> <include src="../../template/header"></include>

4.2、import导入

import具有作用域:  C引入了B，B引入了A，C可以使用B定义的template，但是不能使用A的template

template\template.wxml  定义template  name名称

<template name="one">
我是一
</template>
<template name="two">
我很二
</template>
<template name='three'>
我很{{msg}}
</template>
pages\info\info.wxml template标签调用 is属性对应name名称

<!-- import template使用 -->
<import src="../../template/template"/>
<!-- is和template的name对应 -->
<template is="two"/>
<template is="one"/>
<!-- 传递属性变量 并解析 -->
<template is="three" data="{{msg:'厉害'}}"/>
<template is="three" data="{{msg:'害羞'}}"/>
</view>

5.wxss样式

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

WXSS 用来决定 WXML 的组件应该怎么显示。

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

• 新增了尺寸单位

• WXSS在底层支持新的尺寸单位rpx，可以根据屏幕宽度进行自适应，响应式尺寸单位
• 小程序中全屏尺寸数值是 : 750rpx  （100%）
• 与px的换算关系：

• 提供了全局的样式和局部样式

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

• 此外WXSS仅支持部分CSS选择器，目前支持的选择器有：