小程序使用教程

定义

• 微信里面app
• 16年推出
• 竞品：支付宝小程序，钉钉，美团，头条，抖音qq小程序

优点

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

开发者

• 内存，源码，图片，存储，接口与数据都有限制

模板语法

文本渲染

• {{msg}}
• 可以执行简单的js表达式 {{2+3}} {{msg.ength}}

条件渲染

• wx:if=“”
• wx:elif=“”
• wx:else=“”

列表渲染

• wx:for=“{{list}}” wx:key=“index”
  - {{item}}
  - {{index}}

自定义列表渲染

• 定义item与index的名称
• wx:for=“{{list}}” wx:for-item=“myitem” wx:for-index=“myidx”
• {{myitem}} {{myidx}}

导入

• import
  • 只能导入template内容
  • template/untils.wsml
    < template name=“userCart”>用户名：{{name}}</ template>
  • home.wxml
    < import src=“/template/untils.wxml”>
    < template is=“userCart” data=“{{…u1}}”>
• include
  • 只能导入非template内容
  • template/foot.wxml
    < view>{{内容}}</ view>
  • home.wxml
    < include src=“/template/foot.wx.ml”>

事件

• 事件是视图层到逻辑层的通讯方式。
• 事件可以将用户的行为反馈到逻辑层进行处理。
• 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
• 事件对象可以携带额外信息，如id, dataset, touches。

使用方式

• bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

<view  bindtap="函数名"> Click me! </view>

• bindInput 表单输入时
• bindconfirm表单输入确认

内置API

• 显示提示showToast
• 本地存储
  wx.setStorageSync(key,value)
  本地取
  wx.getStorageSync(key)
• wx.request 网络请求

表单绑定

• < input value=“{{s1}}” bindinput=“inputHd”>
• inputHd(e){
  this.setData({s1:e.detail.value})
  }
• 表单的值获取：e.detail.value

页面切换

组件跳转

• 使用navigator组件

<view>
<navigator open-type="navigate" url="/pages/event/event?name=mumu&age=18">普通跳转</navigator>
</view>
<view>
<navigator open-type="redirect" url="/pages/event/event?name=宋龚&age=22">跳转替换</navigator>
</view>
<view>
<navigator open-type="reLaunch">重启</navigator>
</view>
<view>
<navigator open-type="navigateBack">返回</navigator>
</view>

api跳转

• wx.navigateTo 跳转

 wx.navigateTo({
    url: '/pages/event/event',
  })

• wx.switchTab 切换底部栏
• wx.redirect 重定向
• wx.reLaunch 重启

页面传参

• 小程序页面传参主要通过 查询传参
• 传：url=“xxxx/xxx?name=mumu&age=18”
• 接收：onLoad options参数接收
  • options.name
  • options.age

tabBar

配置信息

• 在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。底部导航最多5个最少2个

{
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/yidian/yidian",//路径
        "text": "一点",//名称
        "iconPath": "/imgs/t4.png",//选中前图标
        "selectedIconPath": "/imgs/t4-h.png"//选中后图标
      }
  ]}
}

全局数据

• app.js的globalData
• 定义 app.js的globalData
• 页面使用
  var app = getApp();
  app.globalData.num

封装request

untils/request.js

// 基础的url
const URI = {
  baseURL:"http://dida100.com"
}
// {name:"mumu",age:18} => name=mumu&age=18
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;
  // 01 可以添加baseURL
  // 是不是以http开头的，是用url不是加上baseURL
  url = url.startsWith("http")?url:URI.baseURL+url;
  // 选项里面有params（get传入的参数）
  if(option.params){
    // 如果有参数，把参数转换为url编码形式加入
    url+="?"+tansParams(option.params);
  }

  // 02 可以添加请求头
  var  header = option.header||{};
  header.Authorization ="Bearer "+wx.getStorageSync('token');

  // 03 可以添加加载提示
  if(option.loading){
    wx.showToast({
      title: option.loading.title,
      icon:option.loading.icon,
    })
  }
  // 返回一个promise
  return new Promise((resolve,reject)=>{
      wx.request({
        // 请求的地址如果一http开头直接用url不是http开头添加我们 baseUrL
        url: url,
        method:option.method||"GET",//请求的方法 默认get
        data:option.data, //post出入的参数
        header,
        success(res){
          // 请求成功
          resolve(res.data);
        },
        fail(err){
          // 04 对错误进行处理
          wx.showToast({title:"加载失败",icon:"none"})
          // 请求失败
          reject(err);
        },
        complete(){
          // 关闭加载提示
          wx.hideToast();
        }
      })
  })
} 
// 定义get简易方法
request.get= (url,config)=>{
  return request({url,method:"get",...config})
}
// 定义post简易方法
request.post= (url,data,config)=>{
  return request({url,method:"post",data,...config})
}
// 导入request
module.exports={request}

vant 组件

• 初始化项目 npm init -y
• 通过npm安装 npm i @vant/weapp -S --production
• 将 app.json 中的 “style”: “v2” 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。
• project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

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

• 注意： 由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为’./'即可
• 打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。