一直以来都没有机会接触到微信小程序开发，今天leader找到我，问我有没有兴趣接一个小程序的项目，我简直乐开了花， 等了好久终于等到今天，于是开始了一些列操作。。。
官方网站：（自己去官方查阅组件，框架，发布，api等流程）
1.安装开发者工具：微信官方网站安装即可
2.简单看一下官方文档 进行基本的了解
3.浏览公司已有小程序项目，向前辈学习
4.开始看需求
5.着手开发项目
6.总结：
一个新的框架，需要快速了解的如下知识点，即可进行开发
1》路由，页面如何跳转
在根目录下app.json文件中，可以对所有文件的路径进行配置。
{
// 路由配置
"pages": [
"pages/home/index",
"pages/mine/index",
"pages/hosInfo/index",
"pages/index/index",
"pages/logs/logs"
],
//下方tab页导航切换
"tabBar": {
"color": "#888888",
"selectedColor": "#6FA4F9",
"backgroundColor": "#ffffff",
"position": "bottom",
"list": [
{
"pagePath": "pages/home/index",
"text": "互联网医院",
"iconPath": "./images/new/hos.png",
"selectedIconPath": "./images/new/hos_active.png"
},
{
"pagePath": "pages/hosInfo/index",
"text": "医院信息",
"iconPath": "./images/new/home.png",
"selectedIconPath": "./images/new/home_active.png"
}，
]
}
}
所有页面进行挂载，那么页面如何跳转呢？
wx.navigateTo({
url: '../../pages/logs/logs'
});
注意： navigateTo, redirectTo 只能打开非 tabBar 页面。
switchTab 只能打开 tabBar 页面。
reLaunch 可以打开任意页面。
页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
调用页面路由带的参数可以在目标页面的onLoad中获取。
2》前后端如何通信
微信小程序因不运行在浏览器，因此不存在跨域问题，直接调用后端接口即可，封装后如下：
在urils文件夹下建立一个文件命名为services ，封装一get请求 一个post请求
var rootDocment = 'https://xxxxxxxxxxxxx/';
var header = {
'Accept': 'application/json',
'content-type': 'application/json',
'Authorization': null,
}
function getReq(url, cb) {
wx.showLoading({
title: '加载中',
})
console.log("header=="),
console.log(header)
wx.request({
url: rootDocment + url,
method: 'get',
header: header,
success: function (res) {
wx.hideLoading();
return typeof cb == "function" && cb(res.data)
},
fail: function () {
wx.hideLoading();
wx.showModal({
title: '网络错误',
content: '网络出错，请刷新重试',
showCancel: false
})
return typeof cb == "function" && cb(false)
}
})
}
function postReq(url, data, cb) {
wx.showLoading({
title: '加载中',
})
console.log("header=="),
console.log(header),
wx.request({
url: rootDocment + url,
header: header,
data: data,
method: 'post',
success: function (res) {
wx.hideLoading();
return typeof cb == "function" && cb(res.data)
},
fail: function () {
wx.hideLoading();
wx.showModal({
title: '网络错误',
content: '网络出错，请刷新重试',
showCancel: false
})
return typeof cb == "function" && cb(false)
}
})
}
// 或者这样用异步Promise处理
function ajax（ url,params,method）{
return new Promise((resolve, reject) => {
wx.request({
url: rootDocment + url,
data: JSON.stringify(params),
header,
method:method || 'POST',
success: function (res) {
resolve(res.data)
},
fail: function (err) {
wx.showModal({
title: '网络错误',
content: '网络出错，请刷新重试',
showCancel: false
})
}
})
})
}
module.exports = {
getReq：getReq，
postReq：postReq，
header: header,
ajaxHandle:ajax,
}
如何调用呢？
var Ajax = require('../../utils/service');
Ajax.getReq("item/getshopbanner/"+getApp().globalData.shopIdx,function(res){
console.log("banner==")
console.log(res)
})
3》多页面间数据如何通信
小程序中并不存在类似react中的redux，或者vue中的vuex概念 但是 同样有三重方式来实现多页面或者多组件间数据通信 1.url传值
A页面
// 点击列表
clickReleaseItem: function (e) {
var release = e.currentTarget.dataset.para;
wx.navigateTo({
url: '../../pages/releaseDetail/releaseDetail?release=' + JSON.stringify(release)
})
},
B页面
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.setData({
// 获取上个页面传过来的列表发布信息
currentRelease: JSON.parse(options.release)
});
},
2.本地存储
A页面
/* 把发布信息异步存储到缓存当中 */
wx.setStorage({
key: 'releases',
data: list,
})
B页面
// 本地获取收藏的发布信息
var that = this;
wx.getStorage({
key: 'releases',
success: function (res) {
that.setData({
releaseArray: res.data
});
},
})
3.全局的 app 对象
A页面
var app = getApp();
app.releaseData = release;
复制代码
B页面
var app = getApp();
var release = app.releaseData;
4》一个页面例如home首页 的基本构成
创建一个文件夹 home 同时里面存在四个文件 |文件类型| 必需| 作用| |js | 是| 页面逻辑| |wxml| 是| 页面结构| |json| 否| 页面配置| |wxss| 否| 页面样式表|
5》生命周期
官方网站有生命周期原理图
// pages/home/index.js
var Ajax = require('../../utils/service');
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
})
我将知识点总结会分享在博客中。并且记录自己的体会。 剩下将会记录我在项目中遇到的问题 并记录如何解决方案
