1.官网https://mp.weixin.qq.com
2.开发工具下载：
如果下载的64位打不开 建议下载32位
3.下载之后安装开发工具然后打开开发工具
微信小程序开发者工具是不支持打开vue项目的 所以我们使用mpvue框架
4.Mpvue：美团开发的基于vue框架的微信小程序开发框架
打开命令行： vue init mpvue/mpvue-quickstart my-project 下载mpvue项目模板
5.实践：
全局配置:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
5.1.页面必须在app.json下注册：
"pages": [
"pages/home/main",
"pages/shop/main",
"pages/order/main",
"pages/directbuy/main",
"pages/search/main",
"pages/myorder/main",
"pages/comment/main",
"pages/commentinfo/main",
"pages/newcomment/main",
"pages/me/main",
"pages/editmyinfo/main",
"pages/bookinfo/main",
"pages/mycollect/main",
"pages/mycommentmessage/main",
"pages/myinfo/main",
"pages/goodsinfo/main",
"pages/address/main",
"pages/cart/main",
"pages/addaddress/main",
"pages/logs/main"
],
5.1.小程序底部tabBar：
"tabBar": {
"color": "#a9b7b7",
"selectedColor": "#EA5149",
"borderStyle": "black",
"list": [
{
"selectedIconPath": "./static/images/index/book-active.png",
"iconPath": "./static/images/index/book.png",
"pagePath": "pages/home/main",
"text": "首页"
},
{
"selectedIconPath": "./static/images/index/comment-active.png",
"iconPath": "./static/images/index/comment.png",
"pagePath": "pages/comment/main",
"text": "消息"
},
{
"selectedIconPath": "./static/images/index/shop-active.png",
"iconPath": "./static/images/index/shop.png",
"pagePath": "pages/shop/main",
"text": "商城"
},
{
"selectedIconPath": "./static/images/index/me-active.png",
"iconPath": "./static/images/index/me.png",
"pagePath": "pages/me/main",
"text": "我的"
}
]
5.2.获取用户授权：
var _tShopfas = tShopfas;
// 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.record" 这个 scope
wx.getSetting({
success(res) {
//如果没有同意授权,打开设置
if (!res.authSetting["scope.userLocation"]) {
wx.openSetting({
success: res => {
// 用户授权之后调用获取城市
_tShopfas.getCityName();
}
});
} else {
wx.navigateTo({
url: "/pages/mappage/main"
});
}
}
});
5.3.定位用户地址：
var _tShopfas = tShopfas;
var myAmapFun = new amapFile.AMapWX({
key: "e545e7f79a643f23aef187add14e4548"
});
myAmapFun.getRegeo({
success: function (data) {
//成功回调
console.log(data);
// data[0].regeocodeData.formatted_address
// _tShopfas.cityName = data[0].regeocodeData.formatted_address;
_tShopfas.update({ cityName: data[0].regeocodeData.formatted_address });
},
fail: function (info) {
//失败回调
console.log(info);
//如果用户拒绝授权
// 默认为北京
_tShopfas.cityName = "北京市";
_tShopfas.update({ cityName: "北京市" });
}
});
5.4.跳转页面
// 前往搜索页面
toSearch() {
wx.navigateTo({
url: "/pages/search/main"
});
},
5.5.视频播放:
5.6.小程序底部tabBar：
{
"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/demo/demo",
"pages/person/person"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black",
"enablePullDownRefresh": true // 是否支持全局下拉刷新
},
//tabBar
"tabBar": {
"custom" : "false" , // 是否自定义tabBar
"list": [
{
"pagePath": "pages/index/index",
"text": "主页"
},
{
"pagePath": "pages/person/person",
"text": "个人"
}
]
},
"sitemapLocation": "sitemap.json"
}
5.7.自定义组件component：
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
5.8.顶部tab：
wxml文件：
选项一
选项二
选项三
页面一
页面二
页面三
wxss文件：
.swiper-tab{
width: 100%;
text-align: center;
line-height: 80rpx;
display: flex;
flex-direction: row;
justify-content: center;
}
.tab-item{
flex: 1;
font-size: 30rpx;
display: inline-block;
color: #777777;
}
.on{
color: red;
}
.swiper{ display: block; height: 100%; width: 100%; overflow: Shopfadden; }
.swiper view{
text-align: center;
padding-top: 100rpx;
}
js文件：
// pages/index/index.js
Page({
/**
* 页面的初始数据
*/
data: {
winWidth: 0,
winHeight: 0,
currentTab: 0
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = tShopfas;
/**
* 获取系统信息
*/
wx.getSystemInfo({
success: function (res) {
that.setData({
winWidth: res.windowWidth,
winHeight: res.windowHeight
});
}
});
},
bindChange: function (e) {
var that = tShopfas;
that.setData({ currentTab: e.detail.current });
},
swichNav: function (e) {
console.log(e.target.dataset.current)
var that = tShopfas;
if (tShopfas.data.currentTab === e.target.dataset.current) {
return false;
} else {
that.setData({
currentTab: e.target.dataset.current
})
}
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
5.9.时间处理绑定函数:
bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。
点击事件：tap
长按事件：longtap
触摸事件：touchstart touchend touchmove touchcancel
<以上资讯仅供参考，如果您需解决具体问题，建议您关注作者；如果有软件产品开发需求，可在线咨询加速度产品经理获取方案和报价>
****更多行业产品开发方案，请关注jsudo加速度 https://www.jsudo.com***
【加速度jsudo（www.jsudo.com）】是国内知名企业数字化建设提供商，为企业提供电商平台搭建（多种模式电商平台搭建：B2B/B2B2C/B2C/O2O/新零售等）、智慧园区建设、数字化营销、人才外包等服务，点击这里查看了解更多行业解决方案。
