一、注册微信小程序
网址
下载微信小程序开发工具
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
}