小程序的基本开发

小程序的基本特点

优点
1.可以在微信中自由分享
2.不用下载APP也可以使用其功能
3.能快速开发，使用微信的api接口
开发者
内存、源码、图片、存储、接口与数据都是有限制的
定义
1.微信里面的APP
2.16年推出
3.竞品：支付宝小程序、钉钉、美团、头条、抖音、qq小程序

开发工具的使用步骤

1.下载微信开发工具https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
2.注册一个微信小程序
https://mp.weixin.qq.com/wxopen/waregister?action=step1
3.注册成功后复制小程序id

4.在微信开发工具注册项目

小程序的开发了解

1.界面了解

2.创建页面
在pages文件夹中可以创建一个demo文件夹，创建成功后可以在demo文件夹中创建一个page页面，这样就可以自动生成几个相关1的文件如下图所示

2.为了方便开始的观看可以在app.json文件中把新建的文件提前

json要求严格语法，不能有多余的逗号

模板语法

小程序的模板语法 约等于vue的模板语法
1.文本渲染
{{num}}
也可以进行简单的js表达式
{{5+5}}
2.条件渲染
小程序的条件渲染不同于vue
wx:if=“”
wx:elif=“”
wx:else
3.列表渲染
wx:for=“{list}” wx:key=“index”
小程序的列表渲染也需要:key，但小程序遍历列表的时候虽然没有定义index，但是index默认存在{{item}}—{{index}}
4.自定义列表渲染
wx:for=“{list}”
wx:for-item=“myitem” wx:key=“index”

5.import导入模块
import
只能导入template内容在pages/home.wxml 书写：

<import src="/template/utils.wxml">
<tempate is="userCart" data="{{...u1}}">

通过home.js-data进行模板传参

include
导入非template内容（例如 include）
在 template里新建foot.wxml
书写：{{内容}}

在pages/home.wxml
书写：

内置组件

1.view组件 块组件
类似于div
2.text 组件 行内组建
类似于shan
3.button 组件 按钮
4.input 组件 表单
5.image 组件 图片

事件

bindinpu 表单输入时
bindconfirm 表单确认时
bindtab 点击时
事件传参

<view data-mag="vvvv"></view>

获取事件传递的参数e.target.dataset.mag

表单

表单绑定

<input value="{{s1}}" bindinput="inputHd"></input>

js

内置api

显示提示showToast
本地存储 wx.setStorageSync(‘key’,value) wx.getStorageSync(‘key’,value)

页面切换

navigate：跳转到其他页面后会出现后退箭头，点击之后可以返回
redirect：重定向，跳转之后不能进行返回

使用navigator进行页面跳转
使用navigator时，open-type属性有四种：
1.navigate:普通跳转，跳转之后还能返回
2.redirect:重定向跳转，切换之后不能返回
3.reLaunch：重启
4.navigateBack：返回按钮

tabBar

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

pagePath 页面路径，必须在 pages 中先定义
text tab 上按钮文字
iconPath 图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon。
position tabBar 的位置，仅支持 bottom / top
其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象
tarBar的属性有很多，需要配置什么属性的画，可以去官网查阅文档进行选择使用

封装request

1.创建一个js文件
2.对request进行封装

const URI = {
  baseURL:"http://dida100.com"
}
function tansParams(obj){
  var str = '';
  for(var k in obj){
    str+=k+"="+obj[k]+"&";
  }
  return str.slice(0,-1);
}
function request(option){
  var url = option.url;
  url = url.startsWith("http")?url:URI.baseURL+url;
  if (option.params) {
    url+="?"+tansParams(option.params);
  }
  var header = option.header||{};
  header.Authorization = "Bearer "+wx.getStorageSync('token');
  if(option.loading){
    wx.showToast({
      title: option.loading.text,
      icon: option.loading.icon,
    })
  }
  return new Promise((resolve,reject)=>{
    wx.request({
      url: url,
      method:option.method,
      data:option.data,
      header,
      success(res){
        resolve(res.data)
      },
      fail(err){
        uni.showToast({title:'加载失败'})
        reject(err)
      },
      complete(){
        wx.hideToast();
      }
    })
  })
}
request.get = (url,config)=>{
  return request({url,method:"get",...config})
}
request.post = (url,data,config)=>{
  return request({url,method:"post",data,...config})
}
module.exports={request}

3.封装后定义一个apijs专门放置数据接口地址所需要的api。类似于

封装request可对于开发速度提升

使用插件

1.npm init -y
重置一下项目
2.npm i @vant/weapp -S --production
安装vant插件库
3.将 app.json 中的 “style”: “v2” 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。
4.修改project.config.json

"packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]

5. 构建 npm 包
   
   6.引入插件
   可在app.json全局引用 ，也可在页面引用

"usingComponents": {
  "van-tab": "@vant/weapp/tab/index",
  "van-tabs": "@vant/weapp/tabs/index"
}