小程序简介:
小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验
微信发布了一款自己研发的小程序开发工具：微信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];
}
}