小程序的学习与使用

定义

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

优点

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

网址

微信小程序开发工具
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

新建项目

界面介绍

项目组成

新建页面

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

特别注意

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

文本渲染

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

条件渲染

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

列表渲染

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

自定义列表渲染

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

导入

import
	只能导入template内容
	template/utils.wxml
	<template name="userCart">
	用户名：{{name}}
	</temlate>
	home.wxml
	<import src="/template/utils.wxml">
	<tempate is="userCart" data="{{...u1}}">
include
	只能导入非template内容
	template/foot.wxml
	<view>{{内容}}</view>
	home.wxml
	<include src="/template/foot.wxml">

内置组件

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

wxss

默认单位是rpx
750rpx 等于一个屏幕的宽
375就是50%的宽

事件

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

事件的传参

<button data-msg="xxx" bindtap="tapHd">
**获取事件的参数  e.target.dataset.msg**

表单的绑定

<input value="{{s1}}" bindinput="inputHd">
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})

页面配置

"enablePullDownRefresh": true,  允许下拉刷新
"backgroundTextStyle": "dark",  背景文字颜色
"backgroundColor":"#f70", 背景颜色
"usingComponents": {} 组件

小程序的页面跳转

组件跳转（<navigator>）
	url 跳转的地址
	open-type 
打开类型
	navigate 普通跳转
	navigateBack 返回
	redirect 重定向
	switchTab 跳转底部栏
	reLaunch 重启
api跳转
	wx.navigateTo  跳转
	wx.switchTab  切换底部栏
	wx.redirect 重定向
	wx.reLaunch 重启

页面传参

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

全局数据

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

npm安装包

插件网站：https://youzan.github.io/vant-weapp/#/home
初始化项目

安装插件
app.json删v2

修改project.config.js
建议直接在网站上复制粘贴，不容易出错
找不到的直接 ctel+f 快速查找
工具，构建npm

导入组件
使用组件

request的封装

// 基础的url
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;
  // 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}

api的编写

// 导入request
const {request}  = require("../utils/request")
// 定义api
// 获取频道与分类
function GetCategory(){
  return request.get("/mi/cats.php")
}

// 获取分类列表
function GetNewsList(data){
  return request.get("/mi/list.php",{params:data})
}

// 获取新闻内容
function GetNewsContent(data){
  return request.get("/mi/content.php",{params:data,loading:{
    title:"内容准备中...",
    icon:"loading"
  }})
}
module.exports = {
  GetCategory,GetNewsList,GetNewsContent
}