小程序的基本开发
小程序的基本特点
优点
1.可以在微信中自由分享
2.不用下载APP也可以使用其功能
3.能快速开发,使用微信的api接口
开发者
内存、源码、图片、存储、接口与数据都是有限制的
定义
1.微信里面的APP
2.16年推出
3.竞品:支付宝小程序、钉钉、美团、头条、抖音、qq小程序
开发工具的使用步骤
1.下载微信开发工具https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
2.注册一个微信小程序
https://mp.weixin.qq.com/wxopen/waregister?action=step1
3.注册成功后复制小程序id
4.在微信开发工具注册项目
小程序的开发了解
1.界面了解
2.创建页面
在pages文件夹中可以创建一个demo文件夹,创建成功后可以在demo文件夹中创建一个page页面,这样就可以自动生成几个相关1的文件如下图所示
2.为了方便开始的观看可以在app.json文件中把新建的文件提前
json要求严格语法,不能有多余的逗号
模板语法
小程序的模板语法 约等于vue的模板语法
1.文本渲染
{{num}}
也可以进行简单的js表达式
{{5+5}}
2.条件渲染
小程序的条件渲染不同于vue
wx:if=“”
wx:elif=“”
wx:else
3.列表渲染
wx:for=“{list}” wx:key=“index”
小程序的列表渲染也需要:key,但小程序遍历列表的时候虽然没有定义index,但是index默认存在{{item}}—{{index}}
4.自定义列表渲染
wx:for=“{list}”
wx:for-item=“myitem” wx:key=“index”
5.import导入模块
import
只能导入template内容在pages/home.wxml 书写:
<import src="/template/utils.wxml">
<tempate is="userCart" data="{{...u1}}">
通过home.js-data进行模板传参
include
导入非template内容(例如 include)
在 template里新建foot.wxml
书写:{{内容}}
在pages/home.wxml
书写:
内置组件
1.view组件 块组件
类似于div
2.text 组件 行内组建
类似于shan
3.button 组件 按钮
4.input 组件 表单
5.image 组件 图片
事件
bindinpu 表单输入时
bindconfirm 表单确认时
bindtab 点击时
事件传参
<view data-mag="vvvv"></view>
获取事件传递的参数e.target.dataset.mag
表单
表单绑定
<input value="{{s1}}" bindinput="inputHd"></input>
js
内置api
显示提示showToast
本地存储 wx.setStorageSync(‘key’,value) wx.getStorageSync(‘key’,value)
页面切换
navigate:跳转到其他页面后会出现后退箭头,点击之后可以返回
redirect:重定向,跳转之后不能进行返回
使用navigator进行页面跳转
使用navigator时,open-type属性有四种:
1.navigate:普通跳转,跳转之后还能返回
2.redirect:重定向跳转,切换之后不能返回
3.reLaunch:重启
4.navigateBack:返回按钮
tabBar
如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。
pagePath 页面路径,必须在 pages 中先定义
text tab 上按钮文字
iconPath 图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。当 position 为 top 时,不显示 icon。
position tabBar 的位置,仅支持 bottom / top
其中 list 接受一个数组,只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序,每个项都是一个对象
tarBar的属性有很多,需要配置什么属性的画,可以去官网查阅文档进行选择使用
封装request
1.创建一个js文件
2.对request进行封装
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;
url = url.startsWith("http")?url:URI.baseURL+url;
if (option.params) {
url+="?"+tansParams(option.params);
}
var header = option.header||{};
header.Authorization = "Bearer "+wx.getStorageSync('token');
if(option.loading){
wx.showToast({
title: option.loading.text,
icon: option.loading.icon,
})
}
return new Promise((resolve,reject)=>{
wx.request({
url: url,
method:option.method,
data:option.data,
header,
success(res){
resolve(res.data)
},
fail(err){
uni.showToast({title:'加载失败'})
reject(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})
}
module.exports={request}
3.封装后定义一个apijs专门放置数据接口地址所需要的api。类似于
封装request可对于开发速度提升
使用插件
1.npm init -y
重置一下项目
2.npm i @vant/weapp -S --production
安装vant插件库
3.将 app.json 中的 “style”: “v2” 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。
4.修改project.config.json
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram/"
}
]
- 构建 npm 包
6.引入插件
可在app.json全局引用 ,也可在页面引用
"usingComponents": {
"van-tab": "@vant/weapp/tab/index",
"van-tabs": "@vant/weapp/tabs/index"
}
争儿不脱发: 好清晰👍
邢帥兵_: 写的很详细,大神
争儿不脱发: 博主厉害哦 再接再厉哈
敲代码的小吉米: 再次看到路总新作 开心开心
争儿不脱发: 路总yyds