小白快速入手微信小程序

微信小程序

定义：微信里面app，2016年推出，竞品：支付宝，钉钉，美团，抖音，qq，头条

优点：在微信自由分享，不用下载，能快速的开发，使用微信的api接口

开发者：内存，源码，图片，存储，接口与数据都有

网址

下载微信小程序开发工具：https://servicewechat.com/wxa-dev-logic/download_redirect?type=win32_x64&from=mpwiki&download_version=1062210310&version_type=1
注册一个微信小程序：https://mp.weixin.qq.com/

1. 新建项目
2. 界面介绍
   
3. 项目组成
   
4. page.json：pages注册页面，window：窗口信息

新建页面：

在pages文件夹右键建立新的文件夹
在文件右键新建页面Page
哪个page在最上面，默认显示哪页
json要求严格语法，不能有多余的注释和逗号

特别注意

页面组件pages/home

home.wxml：模板文件
home.js：业务逻辑
home.wxss：样式
home.json：页面配置

内置组件

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

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

文本是在home.wxml，样式在home.wxss里面

文本渲染

{{msg}}
可以执行简单的js表达式
    {{2+3}}
    {{msg.length}}
    {{msg.length>5?"大于":"小于"}}

条件渲染

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

列表渲染

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

自定义列表渲染

定义item J与index的名称
wx:for="{{list}"
wx:for-item="myitem"
wx:for-index="myidx"
{{myidx}}
{{myitem}}

模板渲染

import只能导入template内容

include只能导入非template内容

事件

bindinput表单输入时
bindconfirm表单输入确认
bindtap按钮点击时

事件的传参

<button data-msg=“xxx" bindtap=“tapHd”">
获取事件的参数

表单的绑定

表单的值获取：e.detail.value

内置的api

1.显示提示 wx.showToast({})

2.本地存储 wx.setStorageSync(key,value)

3.本地取 wx.getStorageSync(key)

4.打开地图选择位置 wx.chooseLocation （{ }）

5.获取设备电量 wx.getBatteryInfoSync （{ }）

6.网络请求 wx.request（）

生命周期

on Load页面加载完毕
onPullDownRefresh下拉刷新
onReachBotton触底更新

更新数据与视图

this.setDate（{k:v}）

允许下拉和刷新

页面配置

页面跳转

<navigator open-type="navigate"  url="跳转的地址">普通跳转</navigator>
<navigator open-type="redirect" url="跳转的地址">重定向</navigator>
<navigator open-type="reLaunch" url="跳转的地址">关闭所有页面，打开到应用内的某个页面</navigator>
<navigator open-type="navigateBack">返回</navigator>
<navigator open-type="switchTab" url="跳转的地址"跳转底部栏</navigator>

api跳转

wx.navigateTo跳转
wx.switchTab切换底部栏
wx.redirect重定向
wx.reLaunch重启

页面栈

页面传参

小程序页面传参主要通过查询传参：

全局数据

app.js的globalDate
    定义app.js的globalData
    页面使用
        var app=getApp（）;
        app.globalData.num

底部导航栏

  "tabBar": {
    "color": "#ccc",  //字体颜色
    "selectedColor": "#000", //选中时导航栏
    "borderStyle": "white", //边框颜色
    "backgroundColor": "#fff", //背景颜色
    "list": [
      {
        "pagePath": "pages/yidian/yidian",  //跳转路径
        "iconPath": "images/t1.png",  //未选中时图标
        "selectedIconPath": "images/t1-h.png",  //选中时的图标
        "text": "导航1" //图标下方文字
      },
      {
        "pagePath": "pages/todo/todo",
        "iconPath": "images/t2.png",
        "selectedIconPath": "images/t2-h.png",
        "text": "导航2"
      }
  },
//最少2个，最多5个

封装request

1.定义baseURL
2.添加请求头
3.添加加载提示
4.同一错误处理

使用npm安装VantWeapp

1. 初始化安装插件
   
2. app.json删除v2
3. 修改project.config.js
   
4. 工具，构建npm
   
5. 导入组件
6. 使用组件