关于微信小程序项目的使用

微信小程序简介

微信小程序顾名思义即微信里面的小应用，体量小，不用下载app。它是由于腾讯于2016年推发出来的。
它主要的竞争产品有，支付宝小程序，钉钉，美团，头条，抖音小程序，QQ小程序。

开发微信小程序的公具

微信小程序开发工具
下载地址
注册一个微信小程序
地址

微信小程序的语法

内置组件

即块级元素与div相似
行内元素与span相似
image 插入图片的标签与img一样，但是如果在小程序内使用img标签是无效的！！！

微信小程序的页面介绍

home.wxml 即模板文件主要用来写架构的页面
home.js 业务逻辑
home.wxss 编写页面样式
默认单位是rpx，750rpx 等于一个屏幕的宽，375就是50%的宽

home.json 页面的配置

小程序的模板语法和vue差不多

文本渲染 {{msg}}同样可以执行一些简单的js语句{{2+3}} 、{{msg.length}}
条件渲染 wx:if=“”、 wx:elif=“” 、 wx:eles
列表渲染

wx:for="{{list}}"
wx:key="index"
{{item}} 数组对象 
{{index}}下标

自定义列表

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

导入不常用
import
只能导入template里面的内容
include
只能导入非template内容

微信小程序的事件

bindInput
表单输入时
bindconfirm
表单输入确认
bindtap
点击时候

微信小程序的传参

获取事件的参数 e.target.dataset.msg
表单的绑定inputHd(e){ this.setData({s1:e.detail.value}) }
表单的值获取e.detail.value

内置api

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

生命周期

onLoad 页面加载完毕
onPullDownRefresh 下拉刷新
onReachBottom 触底更新

更新数据

this.setData({k:v})

todolist

设计数据
list存储数据
{
done:true,是否完成
title：”“显示的文本
}
//temp
和输入框进行双向绑定的临时数据
方法 添加删除

页面配置

在app.json设置
“enablePullDownRefresh”: true, 允许下拉刷新
“backgroundTextStyle”: “dark”, 背景文字颜色
“backgroundColor”:“#f70”, 背景颜色
“usingComponents”: {} 组件

页面跳转

小程序的页面跳转
小程序的跳转分为组件跳转和api跳转

组件跳转

url 跳转的地址

open-type
打开类型
navigate

 <navigator open-type="navigate" url="/pages/event/event?name=mumu&age=18">事件event</navigator>

navigateBack

<navigator open-type="navigateBack">返回</navigator>

redirec

  <navigator open-type="redirect" url="/pages/event/event">跳转并替代</navigator>

SwitchTab

reLaunch

<navigator open-type="reLaunch">重启</navigator>

api跳转

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

页面栈

A页面 B页面 C页面 D页面 E页面

通过 open-type = “navigate” 页面会缓存起来 最多缓存5层
A页面->redirect B页面
A页面是不会被缓存

E 页面 “navigateBack” 到 D页面 （页面的缓存移除一次）
总结：navigate会增加一层缓存页面 redirect 会替换一层缓存页面 navigateBack 会移除一层缓存页面

页面传参

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

<navigator open-type="redirect" url="/pages/event/event?name=ck&age=18">跳转并替代</navigator>
//接搜的页面js中的onLoad
  onLoad(options) {
        // 可以通过options接受其他页面传递的参数
        // 更新到页面中
        this.setData({
            name: options.name,
            age: options.age
        })
    },

封装request

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

//基础的url
const URL={
    baseURL:"http://dida100.com"
  }
  // {name:"mumu",age:18} => name=mumu&age=18
  function tansParam(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，不是http 添加我们baseURL
    url=url.startsWith("http")?url:URL.baseURL+url;
    //选项里面有promise
    if(option.params){
      // 如果有参数，把参数转换为url编码形式加入
      url+="?"+tansParam(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,rejects)=>{
      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){
          //请求失败
          uni.showToast({title:"加载失败",icon:"none"})
          rejects(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})
  }
  // 导出request
  module.exports={request}

npm安装包

初始化项目

安装插件

app.json删v2

修改project.config.js

工具，构建npm

导入组件

使用组件