微信小程序开发
微信小程序开发
小程序开发
浏览：434 次
1.官方网站
2.开发工具下载：
图像.png
如果无法打开64位下载，建议使用32位下载
3.下载后，安装开发工具并打开
微信小程序开发工具不支持打开vue项目，因此我们使用mpvue框架
4.Mpvue：基于美团开发的vue框架的微信小程序开发框架
打开命令行：vue init mpvue/mpvue quickstart my project下载mpvue项目模板
图像.png
5.实践：
全局配置：
图像.png
5.1.页面必须在app.json下注册：
“页面”：[
“页面/主页/主页”，
“页面/商店/主页”，
“页面/订单/主”，
“pages/directbuy/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/cart/main”，
“pages/addaddress/main”，
“页面/日志/主”
],
5.1.小程序底部的TabBar：
“选项卡栏”：{
“color”：“#a9b7b7”，
“selectedColor”：“#EA5149”，
“borderStyle”：“黑色”，
“列表”：[
{
“selectedIconPath”：“./static/images/index/book active.png”，
“iconPath”：“./static/images/index/book.png”，
“pagePath”：“pages/home/main”，
“文本”：“主页”
},
{
“selectedIconPath”：“./static/images/index/comment-active.png”，
“iconPath”：“./static/images/index/comment.png”，
“pagePath”：“pages/comment/main”，
“文本”：“消息”
},
{
“selectedIconPath”：“./static/images/index/shop-active.png”，
“iconPath”：“./static/images/index/shop.png”，
“pagePath”：“pages/shop/main”，
“文本”：“商城”
},
{
“selectedIconPath”：“./static/images/index/me-active.png”，
“iconPath”：“./static/images/index/me.png”，
“pagePath”：“pages/me/main”，
“文本”：“我的”
}
]
5.2.获得用户授权：
var _ this=这个；
//您可以通过wx查询用户是否已授权范围“scope.record”。获取设置
wx.get设置({
成功（res）{
//如果您不同意授权，请打开设置
if（！res.authSetting[“scope.userLocation”]）{
wx.open设置({
成功：res=>{
//用户授权后呼叫获取城市
_this.getCityName（）；
}
});
}其他{
wx.导航到({
url:“/pages/mappage/main”
});
}
}
});
5.3.定位用户地址：
var _ this=这个；
var myAmapFun=新建amapFile.AMapWX({
键：“e545e7f79a643f23aef187add14e4548”
});
我的AmapFun.getRegeo({
成功：函数（数据）{
//成功回调
console.log（数据）；
//data[0].regeocodeData。格式化地址
//_这个。cityName=data[0].regeocodeData。格式化地址；
_这个。更新（｛cityName:data[0].regeocodeData.formatted_address｝）；
},
失败：函数（信息）{
//回调失败
console.log（信息）；
//如果用户拒绝授权
//默认为北京
_This.cityName=“北京”；
_这个。更新（｛cityName:“北京”｝）；
}
});
5.4.跳转页面
//转到搜索页
搜索（）{
wx.导航到({
