小程序简介:
小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验
微信发布了一款自己研发的小程序开发工具:微信Web开发者工具
下载地址:微信小程序官网
集合了开发,预览,发布为一体的开发工具。
一切准备就绪;
首先呢,展示并介绍一下小程序开发的文件目录结构:
- pages:项目开发目录 相当于vue脚手架中的src目录。
- utils:存放封装的工具函数的目录。
- app.js:小程序的入口js文件 相当于vue中的main.js 通过App({})构造器实现。
- app.json:小程序的全局配置。
- app.wxss:小程序的全局css样式,全影响所有的页面外观。
- project.config.json:工具的统一配置。
- sitemap.json:用来配置小程序及其页面是否允许被微信索引。
一个完整的小程序页面包括4部分:
- xxx.wxml:模板页面(也称视图,类似于html) 常用标签:
view:相当于div
button:按钮
image:嵌入图像 类似于img
text:添加文本 相当于span
block:标签一个组织区域,最终不会渲染到页面上,相当于vue中的template- xxx.wxss:页面样式 相当于css 注意:用rpx代表响应式单位 类似于rem
- xxx.js: 写页面逻辑的
- xxx.json:页面的配置
首先一个重点:
小程序的全局配置 app.json :
"pages": [ //设置页面的路径
"pages/index/index", //不需要写index.wxml,index.js,index,wxss,框架会自动寻找并整合
"pages/logs/logs"
],
"window": {
//设置默认窗口的表现形式
"navigationBarBackgroundColor": "#ffffff", //顶部导航栏背景色
"navigationBarTextStyle": "black", //顶部导航文字的颜色 black/white
"navigationBarTitleText": "微信接口功能演示", //顶部导航的显示文字 自由设置
"backgroundColor": "#eeeeee", //窗口的背景色
"backgroundTextStyle": "light", //下拉背景字体、loading 图的样式,仅支持 dark/light
"enablePullDownRefresh": "false", //是否支持下拉刷新 ,不支持的话就直接不写!
"disableScroll": true, // 设置true不能上下滚动,true/false,注意!只能在 page.json 中有效,无法在 app.json 中设置该项。
},
"tabBar": {
//底部tab或者顶部tab的表现,是个数组,最少配置2个,最多5个
"list": [{
//设置tab的属性,最少2个,最多5个
"pagePath": "pages/index/index", //点击底部 tab 跳转的路径
"text": "首页", //tab 按钮上的文字
"iconPath": "../img/a.png", //tab图片的路径
"selectedIconPath": "../img/a.png" //tab 在当前页,也就是选中状态的路径
}, {
"pagePath": "pages/logs/logs",
"text": "日志"
}],
"color": "red", //tab 的字体颜色
"selectedColor": "#673ab7", //当前页 tab 的颜色,也就是选中页的
"backgroundColor": "#2196f3", //tab 的背景色
"borderStyle": "white", //边框的颜色 black/white
"position": "bottom" //tab处于窗口的位置 top/bottom
},
"networkTimeout": {
//默认都是 60000 秒一分钟
"request": 10000, //请求网络超时时间 10000 秒
"downloadFile": 10000, //链接服务器超时时间 10000 秒
"uploadFile": "10000", //上传图片 10000 秒
"downloadFile": "10000" //下载图片超时时间 10000 秒
},
"debug": true //项目上线后,建议关闭此项,或者不写此项
注:tabBar切换:
如果我们的小程序是一个多 tab 应用(客户端窗口的底部有tab栏可以切换页面),那么我们可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。
1、当设置 position 为 top 时,将不会显示 icon
2、tabBar 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。但可以通过自定义tabBar来突破这个限制 如何实现自定义TabBar?
核心实现思路:通过禁用app.json默认tabBar,创建一个自定义tabBar组件来实现
官方参考:官网
每个页面都有一个对应的 json 文件,在 json 文件中写以下代码:
{
"navigationBarTitleText":"页面名字"
}
页面之间传参:
自定义属性:将页面上的参数传递给js
<view data-自定义名称="参数值">
通过触发事件,在事件方法中接收
let {
index}=e.currentTarget.dataset
deleteItem(e) {
let {
index}=e.currentTarget.dataset
console.log(index)
},
路由跳转传参:页面与页面之间传参
微信小程序的路由管理:
1.标签方式触发
vue中:
<router-link to="">
小程序:<navigator url="要中转的路径">
传参方式:<navigator url="要中转的路径?title=banana">
接受:通过另一个页面在onLoad生命周期中接受
2.js(编程式)方式触发
vue中:
this.$router.push()
接受:this.$route.params.id
小程序:<button catchTap="godoLogin">跳转到登录页</button>
godoLogin(e){
wx.navigation({
let {
id} = e.currentTarget.dataset
url:`/pages/login/login?id=${
id}`
})
}
数据请求:
JS原生:XMLHttpRequest,fetch
jQuery:$.ajax,$.getJSON,$.post(),$.get()
Vue:axios
React:fetch
微信小程序:wx.request() 与jQuery的$.ajax类似
wx.request({
url:'', //请求的接口地址
method:'get|post|put|delete',//请求方式
header:{
},//设置请求头
data:{
}, //传参
success() {
}, //成功返回
fail() {
},// 失败返回
})
扩展:
- 修改窗口的背景色
使用 page 标签选择器,修改顶层节点的样式
page {
display: block;
min-height: 100%;
background-color: red;
}
- 有些手机不支持Object.assign方法,如果使用了该方法会出现莫名其妙的报错(并不会提示Object.assign is not function,而是导致调用了Object.assign方法的方法不能被调用)!
function assignObject(o, n) {
for (var p in n) {
if (n.hasOwnProperty(p) && (!o.hasOwnProperty(p)))
o[p] = n[p];
}
}