前段时间，开发了几个官网的小程序，当然还没用到现在mpvue，只是单纯的在微信开发者工具开发的简单的几个页面，作为小程序的初级入门，下面就是这次开发的总结。
几个文件的作用
webchat.jpeg
一：app.wxss： 公用样式文件
小程序现在还未支持sass、less编写样式，对于习惯用这两种编码的码农来说无疑是痛苦的。虽然小程序本身不支持，但是可以用另外的方式去实现，(使用各种打包工具将sass、less文件打包成wxss文件），百度一堆，这里就不详细介绍了。
二：app.json: 配置全局的属性
{
//pages: 所有要加载的页面
"pages": [
"pages/index/index", //写在第一个的页面是编译后最先加载的页面，知道这个很重要，在开发页面的时候很有用，开发哪个页面就把哪个页面放在第一个加载，可以节省很多调试的时间
"pages/product/product",
"pages/news/news",
"pages/about/about",
"pages/detail/detail"
],
//window: 用于设置小程序的状态栏、导航条、标题、窗口背景色。enablePullDownRefresh 是否可以下拉刷新
"window": {
"enablePullDownRefresh": false
},
//tabBar： 底部导航
"tabBar": {
"borderStyle": "white",
"color": "#6e6e6e",
"selectedColor": "#333333",
"backgroundColor": "#FFFFFF",
"list": [
{
"iconPath": "images/nav-icon1.png",
"selectedIconPath": "images/nav-icon1-1.png",
"text": "首页",
"pagePath": "pages/index/index"
},
{
"iconPath": "images/nav-icon2.png",
"selectedIconPath": "images/nav-icon2-1.png",
"text": "产品",
"pagePath": "pages/product/product"
},
{
"iconPath": "images/nav-icon3.png",
"selectedIconPath": "images/nav-icon3-1.png",
"text": "新闻",
"pagePath": "pages/news/news"
},
{
"iconPath": "images/nav-icon4.png",
"selectedIconPath": "images/nav-icon4-1.png",
"text": "我们",
"pagePath": "pages/about/about"
}
]
},
//networkTimeout：设置网络超时时间
"networkTimeout": {
"request": 10000,
"connectSocket": 10000,
"uploadFile": 10000,
"downloadFile": 10000
},
//debug： 设置是否开启 debug 模式
"debug": false
}
三：app.js: 配置全局变量
获取全局信息：用户登录信息，全局变量
四：内页文件，一个页面一个文件夹，比如index页面，每个文件夹下都有四个文件
index.wxss: 单页面样式
index.json: 配置页面顶部title样式
index.js: 单页面数据的请求地
index.wxml: 页面标签html
常用的功能
一：小程序的数据缓存
wx.setStorag（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync）可以对本地缓存进行设置、获取和清理。同一个微信用户，同一个小程序 storage 上限为 10MB
wx.setStorag 和 wx.setStorageSync 的区别在与前者是异步，后者是同步
wx.setStorag用法：
wx.setStorage({
key:"key",
data:"value"
});
wx.setStorageSync用法：
try {
wx.setStorageSync('key', 'value')
} catch (e) {
}
二：模板
定义模板：/template/template.wxml
<template name="footer">
<text>{{data.copyrightInfo}}</text><!-- data为引用模板传入的数据-->
</template>
引用模板：
<import src="../../template/template.wxml"/>
<template is="footer" data="{{data:companyInfo}}"></template>
三：获取用户信息
获取位置wx.getLocation(OBJECT)：
wx.getLocation({
type: 'wgs84',
success: function(res) {
var latitude = res.latitude
var longitude = res.longitude
var speed = res.speed
var accuracy = res.accuracy
}
})
获取用户信息wx.getUserInfo(OBJECT):
<!--wxml-->
<!-- 如果只是展示用户头像昵称，可以使用 <open-data /> 组件 -->
<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>
<!-- 需要使用 button 来授权登录 -->
<button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>
<view wx:else>请升级微信版本</view>
Page({
data: {
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
onLoad: function() {
// 查看是否授权
wx.getSetting({
success: function(res){
if (res.authSetting['scope.userInfo']) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称
wx.getUserInfo({
success: function(res) {
console.log(res.userInfo)
}
})
}
}
})
},
bindGetUserInfo: function(e) {
console.log(e.detail.userInfo)
}
})
四：发送请求
wx.request({
url: 'http://boss.4w1t.com/ajax.php',
data: { //数据
api: 'getNewsClass',
qid: that.data.qid
},
method: "POST", //请求方式
header: {
"Content-Type": "application/x-www-form-urlencoded" //post
},
complete: function (res) {//成功或失败都会指行
if (res == null || res.data == null) {
reject(new Error('网络请求失败'))
}
},
success: function (res) {//成功调用
that.setData({
newsCategory: res.data
});
}
});
五：生命周期
/** * 1.监听页面开在加载的状态 * 页面加载完成之后就不会在执行 */
onLoad: function () { console.log('index---------onLoad()')},
/** * 2.5.监听页面显示， * 当从当前页面调转到另一个页面 * 另一个页面销毁时会再次执行 */
onShow: function() { console.log('index---------onShow()') },
/** * 3.监听页面渲染完成 * 完成之后不会在执行 */
onReady: function() { console.log('index---------onReaday()'); },
/** * 4.监听页面隐藏 * 当前页面调到另一个页面时会执行 */
onHide: function() { console.log('index---------onHide()') },
/** * 当页面销毁时调用 */
onUnload: function() { console.log('index---------onUnload') }
六：富文本插件 wxParse
七：分享页面
//页面分享 article_id页面文章id,从系统缓存中取出
onShareAppMessage: function (res) {
var article_id = wx.getStorageSync('current_article_id');//获取当前页的页面id
var path = '/pages/index/index?article_id=' + article_id + '';//要分享的页面链接
return {
title: article_title,
path: path
}
}
小程序的爬坑之路
一：页面用navigator不能直接跳转底部tabBar页面，需要多加一个参数open-type='switchTab'：
<navigator url="/pages/index/index" open-type='switchTab'>开始</navigator>
二：在页面做了一个下拉菜单，设置了可以水平滚动overflow-x: auto，并没有设置overflow-y: hidden;安卓手机可以显示下拉菜单，结果苹果手机死活不显示，后来终于找到原因：
iphone 设置了overflow-x: auto，滚动时自动隐藏y轴
三：产品需求改变底部tabBar的字体大小，查了各种资料发现小程序还未开放这个小功能，可以换另外一种方式实现：
将tabBar的图标和文字一起做成一个小图标，可以改变图标的大小
