⼿把⼿教你写⼀个⼩程序（推荐）需求
  ⼩程序语⾳识别，全景图⽚观看，登录授权，获取个⼈基本信息
⼀：基础框架
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 所有配置，⼀般需求都可以满⾜
  需求三：开发⼩程序，⼀般要⽤户授权登录，然后获取⽤户的基本信息，个⼈页⾯  如图：
2.到登录接⼝
//app.js
App({
onLaunch: function () {
// 展⽰本地存储能⼒
var logs = wx.getStorageSync('logs') || []
logs.w())
wx.setStorageSync('logs', logs)
// 登录
wx.login({
success: res => {
/
/ 发送 de 到后台换取 openId, sessionKey, unionId
}
})
// 获取⽤户信息
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权，可以直接调⽤ getUserInfo 获取头像昵称，不会弹框
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是⽹络请求，可能会在 Load 之后才返回
// 所以此处加⼊ callback 以防⽌这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
},
globalData: {
userInfo: null
}
})
  需求三：⼩程序有哪些组件可⽤呢
  其实⼩程序的这⼀套框架，跟vue 很像，上⼿很容易
如何使⽤，举栗⼦，使⽤swiper 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.
总结
以上所述是⼩编给⼤家分享的⼿把⼿教你写⼀个⼩程序，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。