微信小程序
准备工作
注册小程序帐号
① 准备一个微信号(你如果还没有微信号,你out了,你是穿越来的吧)
② 申请小程序账号:https://mp.weixin.qq.com/wxopen/waregister?action=step1
(过程中使用的邮箱不要与微信有关联)
获取开发密钥(appId)
在做项目时需要密钥
公众平台登录小程序->开发->开发设置->AppID(小程序ID) wx1481c0459dc80dab
安装开发工具
开发工具,可以选择自己喜欢的,也可以选择微信工具,下载微信开发工具,微信开发工具可完成开发,调试,打包,部署的工作
目录结构
小程序包含一个描述整体程序的 app
和多个描述各自页面的 page
。
默认的目录结构:
1、全局文件
app开头的文件名是全局文件(文件名不能),包括app.js、app.json、app.wxss。
app.js:是全局的js文件,里面的变量可以在任何地方使用。
app.json:是对小程序的全局配置。
app.wxss:是全局样式。
2、页面级文件(pages文件夹下)
如:pages/index下。index.js、index.json、index.wxml、index.wxss。这四个文件名必须一样。
index.js:页面js文件,启动后需要先执行【必须有】
index.json:页面配置文件。只能配置窗口项。决定当前窗口表现
index.wxml:页面布局文件,相当于html 【必须有】
index.wxss:页面样式文件。当index.wxss里的样式和全局的app.wxss的样式冲突时,以index.wxss为准。
文件类型
.wxml, .wxss, .json, .js 文件的作用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UI1xijis-1617707135711)(file:///C:\Users\31759\AppData\Local\Temp\ksohtml25640\wps8.jpg)]
① WXML(WeiXin Markup Language)文件
wxml模板:跟网页中的html是完成同样的功能。
wxml和HTML的不同之处
A. 标签名不同: wxml把常用的标签进行了封装,如:地图()等等
B. 采用mvvm的模式(如同react和vue一样),js中不直接操作DOM,只操作数据,所以,wxml中就出现了类似于vue中的指令:如:wx:if等
② WXSS文件
和网页开发中的css一样,但是进行了扩展.
wxss在css的基础上扩展了哪些?
1、新增了尺寸单位。在写 CSS 样式时,开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比,采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ,开发者可以免去换算的烦恼,只要交给小程序底层来换算即可,由于换算采用的浮点数运算,所以运算结果会和预期结果有一点点偏差。
2、提供了全局的样式和局部样式,你可以写一个 app.wxss 作为全局样式,会作用于当前小程序的所有页面,局部页面样式 page.wxss 仅对当前页面生效。
3、此外 WXSS 仅支持部分 CSS 选择器,详细参考:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html
③ JS文件
JS文件不用解释,就是我们的js文件,完成交互的。
④ JSON文件
配置文件:
App.json:是小程序配置:
project.config.json:工具配置
page.json:页面配置
开发文档
框架(mina框架)
微信客户端给小程序所提供的环境为宿主环境,小程序的运行环境分成渲染层(webview)和逻辑层(jscore),WXML 模板和 WXSS 样式工作在渲染层,JS 脚本工作在逻辑层,小程序的渲染层和逻辑层分别由2个线程管理,这两个线程的通信会经由微信客户端
配置
全局配置
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
app.json,对微信小程序进行全局配置(页面管理,窗口设置,网络请求)
页面配置
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html
pagename.json,对本页面的窗口表现进行配置,覆盖全局
项目环境配置
sitemap.json
,project.config.json
1)、project.config.json
是项目开发环境配置, 包括版本、依赖、程序名之类 。
2)、sitemap.json
: 配置小程序内的搜索, 当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引 。 用户的搜索词条触发该索引时,小程序的页面将可能展示在搜索结果中。 爬虫访问小程序内页面时,会携带特定的 user-agent:mpcrawler
及场景值:1129
。
如果想全局禁用索引,配置project.config.json
,在 setting内部添加checkSiteMap:false
,
wxml(官方组件)
https://developers.weixin.qq.com/miniprogram/dev/component/
1、视图容器(View Container)
view 视图容器 (相当于原来的div 块级标签)
text(相当于行内标签)
scroll-view 可滚动视图容器
swiper 可滑动的视频容器
1.如何让swiper适应图片的宽高
swiper 的属性
image 图片标签
2、基础内容(Basic Content)
icon 图标
text 文字
progress 进度条
rich - text 富文本标签
3、表单组件(From)
(一)、button 按钮
form 表单
input 输入框
checkbox 多项选择器
radio 单项选择器
picker 列表选择器
slider 滑动选择器
switch 开关选择器
label 标签
4、操作反馈组件(Interaction)
action-sheet 上拉菜单
modal 模态弹框
toast 短通知
5、导航(Navigation)
navigator 应用内跳转
6、多媒体(Media)
audio 音频
image 图片
video 视频
7、地图(Map)
map 地图
8、画布(Canvas)
**9
wxss(样式)
WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。
WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。
CSS 相比,WXSS 扩展的特性有:
尺寸单位
样式导入
1、WXSS尺寸单位
rpx尺寸单位可以根据屏幕宽度进行自适应。
建议: 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准
如:
ss
bb
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-giFxB2Dc-1617707135712)(file:///C:\Users\31759\AppData\Local\Temp\ksohtml25640\wps2.jpg)]
2、WXSS样式导入
使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。
在根目录上建立 styles 文件夹,在文件夹内写出相应的页面
3、WXSS内联样式
框架组件上支持使用 style、class 属性来控制组件的样式。
style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style 中,以免影响渲染速度。
4、WXSS选择器
目前支持的选择器有:
5、WXSS全局样式与局部样式
定义在 app.wxss 中的样式为全局样式,作用于所有页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。
js(逻辑)
App()和page()
App()是注册小程序的,Page() 是注册页面的,都接受一个 Object
参数,App() 必须在 app.js
中调用,Page()必须出现在页面.js中,必须调用且只能调用一次,都会给当前注册生命周期钩子,和实例成员(方法、属性)
Object
参数
- data:{} 数据
- 钩子函数(参数){this 指向当前页面,当前小程序}
- 自定义函数(){ this 指向当前页面,当前小程序 }
- 自定义属性:值
页面与主程通讯
pages里面 let app=getApp()
, app.实例属性|方法
数据绑定
WXML 中的动态数据均来自对应 Page 的 data。
在WXML里使用双花括号即可。双括号里可以写变量,表达式(包括三元表达式)
1、组件内容绑定使用(双花括号)将变量包起来
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Neg4YXe8-1617707135714)(file:///C:\Users\31759\AppData\Local\Temp\ksohtml25640\wps9.jpg)]
2、组件属性(需要在双引号之内,并写上双花括号)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ImvhzdaC-1617707135715)(file:///C:\Users\31759\AppData\Local\Temp\ksohtml25640\wps10.jpg)]
列表渲染
1)、wx:for 指令完成列表渲染。
格式:wx:for="{{数组}}"
默认数组的当前项的下标变量名默认为 index,当前项的变量名默认为 item
如:<组件 wx:for="{{数据}}">{{item}}/{{index}}</组件>
2)、自定义下标名和当前项的名字:
使用 wx:for-item 可以指定数组当前元素的变量名,
使用 wx:for-index 可以指定数组当前下标的变量名:
3)、将 wx:for 用在标签上,以渲染一个包含多节点的结构块
block 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。 在渲染结束后,会自动结束消失
条件渲染
1)、wx:if 指令完成条件渲染(当标签不频繁切换的时候)
<组件 wx:if="{{布尔数据}}">
惰性渲染 (相当于vue的 v-if)
wx:elif="{{}}"
wx:else="{{}}"
2)、hidden属性(当标签频繁切换的时候,不要和display一起使用,如果要使用的时候,用wx:if)
<组件 hidden="{{布尔数据}}"
适合频繁渲染 ,true表示隐藏,false表示显示 (相当于vue的 v-show)
3)、也可以使用
数据修改
this.setData({key:value}),响应式的显示在view层,数据的修改结果是异步的
注意:
直接修改数据,不会响应式,如:this.data.属性 = 值 修改, view层不实时响应
app.setData({key:value}) 修改的是主程app
事件
基本格式
- 冒泡方式的绑定事件使用bind
<组件 bindxxx="实例方法"></组件>
xxx==原生移动端事件名(touchstart/touchend/touchcancel/touchmove/tap)
- 不冒泡方式的绑定事件使用catch
<组件 catchxxx="实例方法"></组件>
事件对象
直接在事件处理函数里声明形参既可以。
点击修改数据,加减,传参
如:
//.wxml
<text bindtap="clickMe" >点我</text>
//.js
clickMe(event){
console.log(event);
console.log(event.currentTarget);//就是当前事件源
}
传参(小程序事件传参必须使用data-名 = “值”)
事件处理函数传参时,在组件里写上属性 data-名 = “值”,在函数里,使用 event.currentTarget.dataset.参数名 获取数据。
<组件 bindxxx="实例方法" data-参数名称="值"></组件>
值: 字符
//实例方法
function(event){
event.currentTarget.dataset.参数名称;
}
双向绑定
<input value="{{ipt}}" bindinput="checkIpt"></input>
checkIpt(e){
this.setData({ipt:e.currentTarget.value});//双向绑定
},
生命周期钩子函数
小程序生命周期
一、 应用生命周期(是一个文件,也就是入口文件 app.js文件)
具体功能及应用常景代码如下:
// 应用生命周期
//1,应用第一次启动就会出发的事件
onLaunch(){
//在应用第一次启动就会获取到用户的个人信息
console.log( "onLaunch");
},
//2. 应用第一次被用户看到是出发的生命周期(从后台切回来,触发onShow)
onShow(){
//主要用于 对应用的数据或页面效果 进行重置
console.log("onShow");
},
//3.应用隐藏的时候触发的钩子函数 (切后台)
onHide(){
// 主要用于 当用户进入后台一些页面(钱包等),页面的计时器就要清除,在hide中清除
console.log("Hide");
},
//4.应用的代码发生报错的时候触发,有参数err 返回打印的错误
onError(err){
//用于应用的代码发生报错的时候触发,收集用户的错误信息,通过异步请求发送给后端(版本升级,修复代码)
console.log("onerry");
console.log(err);
},
//5. 页面找不到就会触发
//应用第一次启动时,如果找不到第一个入口文件的话就会触法
onPageNotFound(){
//如果找不到第一个入口的文件的话,通过js的方式进行跳转到自定义的页面(不能跳tabbar页面,与导航组件类似)
//js 跳转
wx:wx.navigateTo({
url: '/pages/zhifu/zhifu',
})
console.log("onPageNotFound");
}
二、页面生命周期
onLoad: function (options) {
//onLoad发送异步请求,用来初始化页面的数据
console.log("onLoad");
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
//在页面第一次加载完毕触发的钩子函数
console.log("onRead");
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
//在页面展示的时候触发
console.log("onShow");
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
//页面隐藏时候触发
console.log("onHide");
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
//当页面关闭的是后会触发这个钩子函数的 <navigator url="../zhifu/zhifu"> 去支付 </navigator> 使用编程shi跳转其他页面的时候 就是卸载页面
console.log("onUnload");
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
//监听用户下拉动作 用于页面的数据或效果重新获取更新是使用
console.log("onPullDownRefresh");
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
//上拉触底事件的处理函数 要让页面出现上下的滚动条,当滚动条触底的时候触法
//用于上啦加载下一页的时候在这做处理
console.log("onReachBottom");
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
//用户点击右上角分享时候触法
console.log("onShareAppMessage");
},
onPageScroll(){
//当页面滚动的时候触发
console.log("onPageScroll");
},
onResize(){下·
//当页面尺寸发生变化的时候触发
//场景:当小程序发生了手机横屏竖屏切换的时候触发
console.log("onResize");
},
onTabItemTap(){
//这个事件只存在在tabbar 页面时候才会触发
//并且是在点击自己的tabitem的时候才会触法
console.log("onTabItemTap");
}
https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html
App(Object object)
注册小程序。接受一个 Object 参数,其指定小程序的生命周期回调等。
App() 必须在 app.js中调用,必须调用且只能调用一次。不然会出现无法预期的后果。
onLaunch(Object object)
小程序初始化完成时触发,全局只触发一次。参数也可以使用 wx.getLaunchOptionsSync 获取。
参数:与 wx.getLaunchOptionsSync 一致
onShow(Object object)
小程序启动,或从后台进入前台显示时触发。也可以使用 wx.onAppShow 绑定监听。
参数:与 wx.onAppShow 一致
onHide()
小程序从前台进入后台时触发。也可以使用 wx.onAppHide 绑定监听。
页面的生命周期
https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
data | Object | 页面的初始数据 | ||
onLoad | function | 生命周期回调—监听页面加载 | ||
onShow | function | 生命周期回调—监听页面显示 | ||
onReady | function | 生命周期回调—监听页面初次渲染完成 | ||
onHide | function | 生命周期回调—监听页面隐藏 | ||
onUnload | function | 生命周期回调—监听页面卸载 | ||
onPullDownRefresh | function | 监听用户下拉动作 | ||
onReachBottom | function | 页面上拉触底事件的处理函数 | ||
onShareAppMessage | function | 用户点击右上角转发 | ||
onShareTimeline | function | 用户点击右上角转发到朋友圈 | ||
onAddToFavorites | function | 用户点击右上角收藏 | ||
onPageScroll | function | 页面滚动触发事件的处理函数 | ||
onResize | function | 页面尺寸改变时触发,详见 响应显示区域变化 | ||
onTabItemTap | function | 当前是 tab 页时,点击 tab 时触发 |
路由
声明式路由
组件:navigator
属性: open-type
值:
-
navigate,redirect 只能打开非 tabBar 页面
-
switchTab 只能打开 tabBar 页面。
-
reLaunch 可以打开任意页面
-
navigate 新+页面栈
-
redirect 会替换当前栈
-
navigateBack 当前页面出栈
-
switchTab 目标tabBar页面入栈 关闭其他所有非 tabBar 页面
-
reLaunch 全部出栈,目标页面栈入栈
-
exit 全部出栈,无进栈 target="miniProgram"时生效
路由传参
url="/pages/xx/xx?a=1&b=2"
switchTab 不能传参数
接参
app.js onLaunch(options) options={a:1,b:2}
pages.js onLoad(options) options={a:1,b:2}
编程式路由
1)、wx.redirectTo(object)
关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
如:
Wxml文件:
<button bindtap="toOther" >跳到other</button>
Js文件:
toOther(){
console.log("toOther");
wx.redirectTo({
url: "../../pages/other/other",// 注意这个相对路径:朝回返两级,也不能出现在tabBar里
success: function () {
console.log("到other了");
},
fail: function (e) {
console.log("失败了,other");
console.log(e);
}
});
},
2)、wx.switchTab(object)
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
注意:只能跳到出现在tabBar的页面里,其它页面不行。
https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html
如:
App.json里的tabBar的配置:
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/goodslist/goodslist",
"text": "商品列表"
}
]
}
注意:没有other,有index
goodslist.Wxml文件:
<button bindtap="toIndex" >回到index</button>
<button bindtap="toOther" >跳到other</button>
goodslist.Js文件:
toIndex: function () {
wx.switchTab({
url: '../../pages/index/index', //这个能够成功,因为,index在tabBar里的list属性里有。
})
},
toOther() {
console.log("toOther");
wx.switchTab({
url: "../../pages/other/other", //不能跳转,因为,other没有出现在tabBar的list属性里。
success: function () {
console.log("到other了");
},
fail: function (e) {
console.log("失败了,other");
console.log(e);
}
});
},
其它的由各位亲爱的同学们,自己仔细,细心地研究(锻炼自学能力噢……)
人机交互
1)、wx.showToast({})
显示消息提示框
如:
Wxml文件:
<button bindtap="regCheck" >注册</button>
Js文件:
regCheck(){
wx.showToast({
title: "注册成功",
icon: "success",
duration: 500,
mask: true
})
},
2)、wx.showModal({})
显示模态对话框
如:
Wxml文件:
<button bindtap="deleteInfo" >删除</button>
Js文件:
deleteInfo(){
wx.showModal({
title: '微信小程序',
content: '确认要删除吗',
success: function (res) {
if (res.confirm) {
console.log("你确认了");
} else if (res.cancel) {
console.log("你取消了");
}
}
})
},
3)、显示loading提示框
wx.showLoading({})显示等待提示框,需主动调用wx.hideLoading 才能关闭
wx.hideLoading({})隐藏 loading 提示框
如:
wxml代码:
<button bindtap="getData" >获取数据</button>
js代码:
getData(){
//显示loading
wx.showLoading({
title: 'loading……………………',
})
// 发送请求
setTimeout(function(){
// 响应回来,隐藏loading
wx.hideLoading();
},2000);
},
4)、显示操作菜单
wx.showActionSheet({})显示操作菜单
数据交互
1、请求本地模拟数据
小程序目前是一定要请求https的数据,如果想要请求本地数据需要对数据进行操作。
1).Json数据:
新建.js文件,写json数据
var local_database = [
{数据。。。。。}
]
module.exports = { //数据暴露出去
postList: local_database
}
2).使用json数据:
在需要使用数据的页面js中引用
var postsData=require(’…/…/data/posts-data.js’); //引入
在生命周期的onLoad函数中使用this.setData({})进行数据赋值
2、request数据请求
发起 HTTPS 网络请求。request({参数:值})
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GChyuZhn-1617707135715)(file:///C:\Users\31759\AppData\Local\Temp\ksohtml25640\wps13.jpg)]
1)、request数据请求真实接口数据
每个微信小程序需要事先设置一个通讯域名,小程序只可以跟指定的域名与进行网络通信。
否则会出现如下错误:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Oz9dDC17-1617707135716)(file:///C:\Users\31759\AppData\Local\Temp\ksohtml25640\wps14.jpg)]
如何设置: 选中自己的登录头像 选择登录信息 进行合法域名设置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sregoFdS-1617707135716)(file:///C:\Users\31759\AppData\Local\Temp\ksohtml25640\wps15.jpg)]
注意:
域名不能使用 IP 地址或 localhost;
域名必须经过 ICP 备案;
2)、request请求mock数据
没有服务器怎么请求数据?那就跳过域名校验。
在微信开发者工具中,可以临时开启 ****开发环境不校验请求域名****、TLS版本及HTTPS证书 选项,跳过服务器域名的校验。此时,在微信开发者工具中及手机开启调试模式时,不会进行服务器域名的校验。
如下步骤:
在微信开发工具中 点击设置-》项目设置 就可以正常使用接口
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DQg4b5Ua-1617707135716)(file:///C:\Users\31759\AppData\Local\Temp\ksohtml25640\wps16.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QZzZdAm9-1617707135716)(C:\Users\31759\AppData\Roaming\Typora\typora-user-images\1599041100880.png)]
选中:“不校验合法域名、web-view………………”
在代码中就可以使用json-server数据:
onLoad: function () {
wx.request({
url: 'http://localhost:3000/goods',
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
console.log(res.data)
}
})
}
post请求,需要设置请求头
header: {
‘content-type’: ‘application/x-www-form-urlencoded’
}
自定义组件
一、如何配置组件文件夹
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
(1) 组件模板和样式
(2) Component 构造器
(3) 组件间通信与事件
(一)、父传子 :下图所示
(二)、子传父
子组件通过触发事件传值如:点击事件
父组件在子组件的标签上绑定传递过来的自定义事件
子向父传递的自定义事件(zc),和传递的参数(index)
this.triggerEvent("zc",index)
父组件在子组件的标签上 绑定子组件传递过来的自定义事件
<Bunner neirong = "{{yangshi}}" bindzc="zc"></Bunner>
在父组件的js代码内 可以通过事件的 zc(e),获取到传的参数
zc(e){
// 获取到子组件传来的下标
let index = e.detail
// 将当前数组的数组获取到并负值给arr
let arr = this.data.yangshi
},
拓展 slot 插槽 占位符
slot占据位置,父组件传内容 使用 block 占位符
父组件
<text>我的页面</text>
<navigator url="../zhifu/zhifu"> 去支付 </navigator>
<Bunner neirong = "{{yangshi}}" bindzc="zc">
<block wx:if="{{yangshi[0].isactive}}">我是首页</block>
<block wx:elif="{{yangshi[1].isactive}}">我是原创</block>
<block wx:elif="{{yangshi[2].isactive}}">我是分类</block>
<block wx:elif="{{yangshi[3].isactive}}">我是关于</block>
<block wx:elif="{{yangshi[4].isactive}}">我的我的</block>
</Bunner>
子组件
<view>
<slot></slot>
</view>
(4) 组件生命周期
(5) behaviors
(6) 组件间关系
(7) 数据监听器
(8) 纯数据字段
1、定义
不是创建page,而是创建component,一个小程序组件(wxml,wxss,js,json)
//组件名.js
Component({ //构造一个组件
//组件的属性列表,相当于vue组件的props
properties:{
title:{ //属性名
type:String,//类型
value: '默认值'
}
}
//组件数据,内部状态
data:{
msg:'..'
num1:1,
num2:2,
sum:3
}
methods:{ //组件方法
show(){
console.log(this.data.msg/this.properties.title)
this.setData({msg:...}) / properties 不可修改
}
}
//组件监听器
observers: {
'num1, num2': function(num1, num2) {
// 在 num1 或者 num2 被设置时,执行这个函数
this.setData({
sum: num1 + num2
})
}
})
2、注册
全局注册 app.json , 到处可用(page,component)
"usingComponents":{
"使用时的组件名":"components/comp1/comp1"
}
局部注册 pagename.json ,当前页面可以
"usingComponents":{....}
组件内注册组件, 当前组件可用
"usingComponents":{....}
"component": true, // 当前组件可以套用组件
3、使用
<comp1 title="{{值}}"></comp1>
API
小程序 的API基本上都是以wx.开头的。
(1) 基础
wx.getSystemInfoSync
wx.getSystemInfo
(2) 路由
wx.switchTab
wx.reLaunch
wx.redirectTo
wx.navigateTo
wx.navigateBack
(3) 界面交互:
wx.showToast
wx.showModal
wx.showLoading
wx.showActionSheet
wx.hideToast
wx.hideLoading
(4) 导航栏:
wx.setNavigationBarTitle
(4) 网络
wx.request
(5) 数据缓存
wx.setStorageSync
wx.setStorage
wx.removeStorageSync
wx.removeStorage
wx.getStorageSync
wx.getStorageInfoSync
wx.getStorageInfo
wx.getStorage
wx.clearStorageSync
wx.clearStorage
骨架屏
https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html
小程序的框架
mpvue:美团点评团队出品的小程序开发框架:mpvue,是“基于Vue”的框架的。mpvue是从整个Vue的核心代码上经过二次开发而形成的一个框架,相当于是给Vue本身赋能,增加了开发微信小程序的能力。
wepy:WePY是在代码开发风格上借鉴了Vue,本身和Vue没有什么关系。
mpvue
介绍及其特点
1.mpvue的介绍:
mp:mini program
Vue:就是vue了
Mpvue就是把用vue的技术体系开发小程序的框架。
2.mpvue框架的优点:
比起原生小程序的开发,或者说,在目前原生小程序开发的基础上,我们可以有更多地获取到这样一些能力:
**· 彻底的组件化开发能力:**提高代码(原生小程序没有,这个很重要,小程序把那个啥和那个啥分开了)
· 完整的 Vue.js 开发体验(学过vue后,开发小程序,so easy)
· 方便的 Vuex 数据管理方案:方便构建复杂应用(这个很重要)
· 快捷的 webpack 构建机制:自定义构建策略、开发阶段 hotReload(这是前端必备)
· 支持使用 npm 外部依赖(这是前端必备)
· 使用 Vue.js 命令行工具 vue-cli 快速初始化项目
· H5 代码转换编译成小程序目标代码的能力
它的目标是:在未来最理想的状态下,可以一套代码可以直接跑在多端:WEB、微信小程序、支付宝小程序、Native(借助weex)
环境搭建和第一个程序:
1、安装nodejs,vue-cli
2、创建mpvue的项目:vue init mpvue/mpvue-quickstart 项目名称
假如,项目名称为mpvueprj。则运行如下命令,
vue init mpvue/mpvue-quickstart mpvueprj
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nZgUSm58-1617707135716)(file:///C:\Users\31759\AppData\Local\Temp\ksohtml25640\wps19.jpg)]
都默认回车吧
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NT3CzXpE-1617707135717)(file:///C:\Users\31759\AppData\Local\Temp\ksohtml25640\wps20.jpg)]
项目建好了
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5z7RQmRt-1617707135717)(file:///C:\Users\31759\AppData\Local\Temp\ksohtml25640\wps21.jpg)]
3、进入项目目录,安装依赖:npm i
4、Npm run dev后,进入开发模式,就会自动产生目录dist。Dist目录是编译产生的小程序的代码。以后,写vue代码就行,小程序的代码就会自动产生。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DI8uvL0g-1617707135717)(file:///C:\Users\31759\AppData\Local\Temp\ksohtml25640\wps22.jpg)]
5、运行小程序。
需要打开微信开发者工具,来运行。
(1) 在微信开发者工具里,导入项目:
(2) 项目目录指向 mpvueprj
(3) 填入appId
(4) 点击“导入”按钮
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nEzWAaAi-1617707135717)(file:///C:\Users\31759\AppData\Local\Temp\ksohtml25640\wps23.jpg)]
(5) 如下效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M4SZoPc6-1617707135717)(file:///C:\Users\31759\AppData\Local\Temp\ksohtml25640\wps24.jpg)]
(6) 尝试修改vue组件,自动编译,小程序结果立即呈现
- Vue组件(index/index.vue)增加“hello”文字
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hso8DK2y-1617707135718)(file:///C:\Users\31759\AppData\Local\Temp\ksohtml25640\wps27.jpg)]
自动编译后,在微信开发者工具里小程序的结果立即呈现
![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yKgiijn5-1617707135718)(file:///C:\Users\31759\AppData\Local\Temp\ksohtml25640\wps29.jpg)]
wepy
WePY介绍
WePY 是 腾讯 参考了Vue 等框架对原生小程序进行再次封装的框架,更贴近于 MVVM 架构模式, 并支持ES6/7的一些新特性。
注意:WePY 2 是基于小程序原生组件实现组件化开发。因此 WePY 2 支持的最低版本小程序基础库为 1.6.3。
官网:https://wepyjs.github.io/wepy-docs/2.x/#/
WePY 版本
WePY 2 并不是基于 WePY 1 的升级版,而是完全重新开发的全新版本
WePY 安装和创建项目
WePY的安装或更新都通过npm进行。
-
全局安装 WePY CLI 工具
npm install @wepy/cli -g
-
使用 standard 模板初始化项目:
wepy init standard 项目名
-
cd myproj
-
npm install
-
npm run dev 监听并且编译项目
微信开发者工具导入项目(项目根目录),就可以预览效果了
四、报错
1、报错
怎么办? 问题出在compiler-less的版本问题
需要把
compile-less 锁定到2.0.3,再把@wepy/cli更新到@wepy/cli@2.0.0-alpha.18
2、解决:
问题出在compiler-less的版本问题
需要把compile-less 锁定到2.0.3,
再把@wepy/cli更新到 @wepy/cli@2.0.0-alpha.18
在package.json中修改
重新cnpm install
微信小程序的实战开发
第三方的框架
二、创建文件夹,及小程序所有的页面
常用组件
(一)、text
image
轮播图 swiper
导航标签 navigator
button
button开放功能
radio
父组件向子组件传递数据
封装请求
上图是正常发送请求的代码!
封装前准备 在app文件的同级新建request文件夹,并新建文件index.js 内容如下
在页面中使用封装的请求时