需求

小程序语音识别、全景图片查看、登录授权、获取个人基本信息

一、基本框架

官方发展文件：https://developers.weixin.qq.com/miniprogram/dev/(其实官方文件很明确)

1.按照官方文件的步骤，创建一个新的小程序项目

2.那么毕竟默认的只是基础骨架，肌肉线条还是要自己填充

App.json是当前小程序的全局配置

所有页面路径、界面显示、网络超时、小程序底部标签

需求1:标签在底部，我们必须有三个常驻按钮像原生应用程序切换页面

只需将以下代码添加到app.json文件中

另外，一定要配置页面路径

tabBar ' : { ' color ' : ' # cacaca '，' selectedColor': '#f40 '，' borderStyle': '#fff '，' backgroundColor': '#ffffff '，List ' :[{ ' page path ' : ' pages/index/index '，' text' :' VR picture '，' icon path ' 3: ' image/home . png '，' selectedIconPath ' 33330

需求二：看到别人的小程序，可以自定义顶部的颜色

如图所示：

说，说

还要在app.json中插入代码，自定义颜色~

Window' : { '背景文字样式' :' light '，' Navigation barbakgroundcolor ' : ' # 458 af 1 '，'导航栏标题文字' :' VR world '，'导航栏文字样式' :' black '，' enable pulldown refresh ' : true }，总结app.json的配置，直接参考官方文档中app.json的所有配置，一般要求都能满足。

贴心贴官方链接：https://developers . weixin . QQ.com/mini program/dev/framework/config . html #全局配置

要求3:开发一个小程序，一般需要用户授权登录，然后获取用户的基本信息和个人页面

如图所示：

1.官方api地址：https://developers . weixin . QQ.com/mini program/dev/API/open-API/log in/wx . log in . html。

2.找到登录界面

//app . jsapp({ onlunch : function(){//show local storage capacity var Logs=wx . getstorage ync(' Logs ')| |[]Logs . unshift(date . now())wx . setstorage ync(' Logs '，Logs) //登录wx . log in({ success 3360 RES={//发送res.code到后台获取openId、sessionKey、UnionId} }) //获取用户信息wx。get setting({ success : RES={ if(RES . auth setting['作用域。userinfo ']){//已经授权，可以直接调用getUserInfo获取头像昵称。不会播放wx . getuserinfo({ success : res={//可以将RES发送到后台来解码union idthis . global data . userinfo=res.userinfo//because getuserinfo是一个网络请求，可能会在Page.onLoad//so添加回调后返回这里来防止这个如果(这个。userinforeadycallback) {this。user inforeadycallback(RES)} } } } } })}，global data : { user info 3360 null } })要求3:小程序中有哪些组件可用？

其实这个小程序的框架和vue很像，很容易上手

1.将链接放在心脏上：https://developers.weixin.qq.com/miniprogram/dev/component/2.官方支持的组件

如何使用、提起栗子和使用swiper

3.如何使用它，举起栗子，用swiper循环播放

swiper指示器-dots=' { { indicatorDots } } ' autoplay=' { { autoplay } } ' interval=' { { interval } } ' duration=' { { duration } } ' block wx : for=' { { imgUrls } } Swiper-item图像src=' http : { { item } } ' class=' slide-image ' width=' 355 ' height=' 150 '/Swiper-item/block/swipe渲染：

总结：建立了小程序的继承框架。如果你需要什么就加进去。如果你是新手，不是前端开发人员，首先要了解它

4.遵循applet、模板语言、数据绑定、组件使用、传递参数和路由这些规则

5.

摘要

以上就是边肖分享的教你写微信小程序的内容，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！