近期接了一个微信小程序的项目，项目需求是小程序语音识别，全景图片收看，登陆授权，获得个人基本信息。非常不错，具备一定的参照参考价值，需要的朋友参照下吧
需求
小程序语音识别，全景图片收看，登陆授权，获得个人基本信息
一：基础框架
官方开发文本：https://developers.weixin.qq.com/miniprogram/dev/ （其实官方文档写的很清楚了）
1.跟随官方文档一步一步来，新建一个小程序项目就好
2.之后呢，毕竟默认的只是基本骨架，肌肉线条还是要自己填的
app.json 是当前小程序的全局配备
小程序的全部页面途径、页面表现、网络超时时间、底端 tab
需求一：底端tab，大家要像原生APP那般要靠是三个长驻的按键，转换页面
在app.json 文档中添加下面的代码就可以了
也有哦，一定要配备pagepath（页面途径）
“tabBar”: {
“color”: “#cacaca”,
“selectedColor”: “#f40”,
“borderStyle”: “#fff”,
“backgroundColor”: “#ffffff”,
“list”: [
{
“pagePath”: “pages/index/index”,
“text”: “VR照片”,
“iconPath”: “image/home.png”,
“selectedIconPath”: “image/home_hover.png”
},
{
“pagePath”: “pages/voice/voice”,
“iconPath”: “image/question.png”,
“selectedIconPath”: “image/question_hover.png”,
“text”: “VR语音”
},
{
“pagePath”: “pages/me/me”,
“iconPath”: “image/mytb.png”,
“selectedIconPath”: “image/mytb_hover.png”,
“text”: “你的VR全球”
}
]
}
效果图：
需求二：看到别人家的小程序，顶端能够自定义颜色
如图：
好说，好说
一样在app.json 中插入一下代码，色调自定啦~
“window”: {
“backgroundTextStyle”: “light”,
“navigationBarBackgroundColor”: “#458af1”,
“navigationBarTitleText”: “VR全球”,
“navigationBarTextStyle”: “black”,
“enablePullDownRefresh”: true
},
总结app.json 配备，直接参照官方文档中的app.json 全部配备，一般需求都能够满足
暖心的贴上官方连接：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#全局配备
需求三：开发小程序，一般要客户授权登录，随后获得客户的基本资料，个人页面
如图：
1.官方api 地址：https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html
2.找到登陆接口
//app.js
App({
onLaunch: function () {
// 展现本地存储能力
var logs = wx.getStorageSync(‘logs’) || []
logs.unshift(Date.now())
wx.setStorageSync(‘logs’, logs)
// 登陆
wx.login({
success: res => {
// 推送 res.code 到后台获得 openId, sessionKey, unionId
}
})
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting[‘scope.userInfo’]) {
// 早已授权，能直接启用 getUserInfo 获得头像昵称，不会弹窗
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
// 因为 getUserInfo 是网络请求，可能在 Page.onLoad 之后才回到
// 因此这里添加 callback 以避免这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
},
globalData: {
userInfo: null
}
})
需求三：小程序有什么部件可用呢
其实小程序的这一套框架，跟vue 很像，入门很容易
1.帖心的放入连接：https://developers.weixin.qq.com/miniprogram/dev/component/
2.官方适用的部件
3.怎么使用，举栗子，使用swiper 滚屏
<swiper indicator-dots=”{{indicatorDots}}”
autoplay=”{{autoplay}}” interval=”{{interval}}” duration=”{{duration}}”>
<block wx:for=”{{imgUrls}}”>
<swiper-item>
<image src=”{{item}}” class=”slide-image” width=”355″ height=”150″/>
</swiper-item>
</block>
</swiper>
效果图：
总结：小程序的接任框架就搭个了，必须什么就在里面添加就好啦 假如你彻底是新手，不是前端开发者，先要去了解一下
4.要遵照小程序的标准，模版语言，数据关联，部件应用，传参，路由这些
5.
总结
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
