最近收到一个微信小程序项目。项目的需求是小程序语音识别、全景看图、登录授权、获取个人基本信息。很不错，有一定的参考价值。请有需要的同事参考。
需求
小程序语音识别，全景看图，登录授权，获取个人基本信息。
一:基本框架
官方发展文件:https://developers.weixin.qq.com/miniprogram/dev/(官方文件写得很清楚)
1.随着正式文件的一步步到来，只需要新建一个小程序项目就可以了。
2.然后，毕竟默认的只是基本骨架，肌肉线条要自己填。
App.json是当前小程序的全局设置。
所有页面路径、界面显示、网络超时和小程序的底部选项卡。
需求一:底部标签页，和原生APP一样，我们要有三个常驻按钮来切换页面。
只需将以下代码添加到app.json文件中。
另外，一定要设置pagepath。
” tabBar”: {
【颜色】:” #卡卡卡”，
” selectedColor”: “#f40 “，
” borderStyle”: “#fff “，
” backgroundColor”: “#ffffff “，
“列表”:[
{
” pagePath “:”页面/索引/索引”，
「文字」:「VR图片」，
” iconPath”: “image/home.png “，
” selectedIconPath “:” image/home _ hover . png “
},
{
“页面路径”:“页面/语音/语音”，
” iconPath”: “image/question.png “，
” selectedIconPath “:” image/question _ hover . png “，
【正文】:“VR语音”
},
{
“页面路径”:“页面/我/我”，
” iconPath”: “image/mytb.png “，
” selectedIconPath “:” image/mytb _ hover . png “，
《正文》:《你的VR世界》
}
]
}
渲染:
要求二:瞥见别人的小程序，顶部可以定制颜色。
如图所示:
说得好，说得好
同样，在app.json中插入代码，颜色自定义~
“窗口”:{
” backgroundTextStyle “:”光”，
” navigationBarBackgroundColor “:” # 458 af 1 “，
《navigationBarTitleText》:“VR:《VR世界》，
” navigationBarTextStyle “:”黑色”，
” enablePullDownRefresh “:真
},
总结app.json的设置，直接引用官方文档中app.json的所有设置，满足普通需求即可。
贴心官方链接:https://developers . weixin . QQ . com/mini program/dev/framework/config . html # % E5 % 85% A8 % E5 % B1 % 80% E9 % 85% 8d % E7 % BD % AE。
需求三:开发小程序，照例要求用户授权登录，然后获取用户的基本信息，个人和私人页面。
如图所示:
1.api官方地址:https://developers . weixin . QQ . com/mini program/dev/API/open-API/log in/wx . log in . html。
有哪些线上创业项目？推荐5个热门互联网创业项目。
2。找到登录界面。
//app.js
应用程序({
onLaunch: function () {
//展示内陆存储能力
var logs = wx . getstoragesync(‘ logs ‘)| |[]
logs.unshift(Date.now())
wx.setStorageSync(‘logs ‘，日志)
//登录
wx.login({
成功:res = gt{
//将res.code发送到后台，换取openId、sessionKey、unionId。
}
})
//获取用户信息
wx.getSetting({
成功:res = gt{
if(RES . auth setting[‘ scope . userinfo ‘]){
//已经授权，可以直接挪用getUserInfo获取头像昵称，不用弹窗。
wx.getUserInfo({
成功:res = gt{
//res可以发送到后台解码unionId。
this . global data . userinfo = RES . userinfo
//因为getUserInfo是网络请求，所以可能会在Page.onLoad之后返回。
//所以这里加了回调来防止这种情况。
if(this . userinfoeadycallback){
this . userinfoeadycallback(RES)
}
}
})
}
}
})
},
全局数据:{
userInfo:空
}
})
需求applet有哪些组件可用？
这种真的小程序的框架和vue很像，很容易上手。
1.把链接放到帖子上:https://developers . weixin . QQ . com/mini program/dev/component/。
2.官方支持的组件
3.怎么用，举栗子用swiper旋转木马。
ltswiper indicator-dots = ” { { indicator dots } } “
autoplay = ” { { autoplay } } ” interval = ” { { interval } } ” duration = ” { { duration } } ” gt；
lt;block wx:for=”{{imgUrls}}”gt; ltblock wx:for = ” { { imgUrls } } ” gt；
ltswiper-item gt；
ltimage src = ” { { item } } ” class = ” slide-image ” width = ” 355 ” height = ” 150 “/ gt；
lt/swiper-item gt；
lt/block gt；
lt/swiper gt；
渲染:
总结:小程序的继任框架设置好了，在里面添加你需要的就行了。如果你是一个完全的新手，而不是前端开发人员，那就先了解一下。
4.遵循applet、模板语言、数据绑定、组件使用、参数传递和路由的规则。
5.
摘要
