微信开发工具 docker版

一、注册微信小程序

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

注册一个微信小程序
https://mp.weixin.qq.com/wxopen/waregister?action=step1

二、内置组件

1. view组件 块组件
2. text 组件 行内组件
3. button组件 按钮
4. input组件 表单

三、微信小程序模板语法

1.文本渲染

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

2.条件渲染

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

3.列表渲染

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

4.自定义列表渲染

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

5.导入（不常用）

1.import 只能导入template内容

1）template/utils.wxml

<template name="userCart">
		用户名：{{name}}
	</temlate>

2）home.wxml

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

2. include 只能导入非template内容

1） template/foot.wxml

<view>{{内容}}</view>

2） home.wxml

<include src="/template/foot.wxml">

四、微信小程序事件

1. 常用事件

1） bindtap 点击时候
2） bindconfirm  表单输入确认
3.）bindInput  表单输入时

2. 事件的传参

<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

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

七、生命周期

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

八、更新数据与视图

this.setData({k:v})

九、页面配置

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

十、小程序的限制

1. 源文件大小

每个包不能超过2M
总共不能超过16-20M

2. 页面缓存堆栈5层
3. 底部栏

最少2个最多5个
底部栏图片31k

4. 本地存储

1次1M 最多100M

5. setData

不能超过1M
功能和微信一致（右上角胶囊按钮，下拉刷新。。。）

十一、小程序的页面跳转

1.组件跳转

<navigator url="/pages/xxx/xx">
	url 跳转的地址
	open-type 
打开类型
	navigate 普通跳转
	navigateBack 返回
	redirect 重定向
	switchTab 跳转底部栏
	reLaunch 重启

2. 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

十三、全局数据

1. app.js的globalData

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

2. 本地存储

十四、封装request.js

为什么需要封装 request

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

1.初始化项目

2.安装插件

3.app.json删v2

4.修改project.config.js

5.工具，构建npm

6.导入组件

7. 使用组件

十五、封装完整案例代码

第一次封装 request.js

// 定义服务器代理
// 基础url
const URI = {
 	baseURL:"http://xxxxxx"
}
// 把{name:zhangsan,age:18}转换为name=zhangsan&age=18
function transPrams(obj){
  var str = "";
  for(var k in obj){
    str+=k+"="+obj[k]+"&";
  }
  // 移除最后一个&
  return str.slice(0,-1)
}

function request(option){
  var url = option.url;
  // 请求的地址如果是以gttp开头 直接用url  如果不是开头添加baseURL
  url=url.startsWith("http")?url:URI.baseURL+url;
  // 选项里面有params
  if(option.params){
    // 如果有参数，吧参数转换为url编码形式加入
    url+="?"+transPrams(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({
      url:url,
      method:option.method||"GET",//请求的方法
      data:option.data,//post传入的参数
      header,
      success(res){ 
        //请求成功
	    resolve(res.data)
   	   },
     fail(err){
       // 03对错误进行对比
        wx.showToast({
         title: '加载失败',
          icon:"none"
        })
        //请求失败
       rejects(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})
}
module.exports={request}

二次封装 api.js

// 导入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,GetNewsContent,GetNewsList
}