手把手教你写一个微信小程序(推荐)


Posted in Javascript onOctober 17, 2018

需求

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

一:基础框架

官方开发文档: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#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE

手把手教你写一个微信小程序(推荐)

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

如图:

手把手教你写一个微信小程序(推荐)

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.官方支持的组件

手把手教你写一个微信小程序(推荐)如何使用,举栗子,使用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.

手把手教你写一个微信小程序(推荐)

总结

以上所述是小编给大家分享的手把手教你写一个微信小程序,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
文本框input聚焦失焦样式实现代码
Oct 12 Javascript
基于jquery实现放大镜效果
Aug 17 Javascript
Javascript removeChild()删除节点及删除子节点的方法
Dec 27 Javascript
jquery自定义插件开发之window的实现过程
May 06 Javascript
利用Angularjs实现幻灯片效果
Sep 07 Javascript
js代码实现下拉菜单【推荐】
Dec 15 Javascript
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
Jun 26 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 Javascript
微信小程序实现发送验证码按钮效果
Dec 20 Javascript
jquery实现简单拖拽效果
Jul 20 jQuery
详解vue3.0 的 Composition API 的一种使用方法
Oct 26 Javascript
微信小程序开发之tabbar图标和颜色的实现
Oct 17 #Javascript
解决百度Echarts图表坐标轴越界的方法
Oct 17 #Javascript
vue实现循环切换动画
Oct 17 #Javascript
element-ui upload组件多文件上传的示例代码
Oct 17 #Javascript
bootstrap table合并行数据并居中对齐效果
Oct 17 #Javascript
IE9 elementUI文件上传的问题解决
Oct 17 #Javascript
vue src动态加载请求获取图片的方法
Oct 17 #Javascript
You might like
全国FM电台频率大全 - 19 广东省
2020/03/11 无线电
The specified CGI application misbehaved by not returning a complete set of HTTP headers
2011/03/31 PHP
抓取并下载CSS中所有图片文件的php代码
2011/09/26 PHP
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
php连接微软MSSQL(sql server)完全攻略
2016/11/27 PHP
PHP中trait使用方法详细介绍
2017/05/21 PHP
javascript中获取选中对象的类型
2007/04/02 Javascript
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
2009/05/21 Javascript
Javascript 面向对象 对象(Object)
2010/05/13 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
Underscore源码分析
2015/12/30 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
2016/08/19 Javascript
jquery实现简单的瀑布流布局
2016/12/11 Javascript
SpringMVC+bootstrap table实例详解
2017/06/02 Javascript
原生JS实现日历组件的示例代码
2017/09/22 Javascript
vue+koa2搭建mock数据环境的详细教程
2020/05/18 Javascript
玩转python爬虫之正则表达式
2016/02/17 Python
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
Python实现矩阵加法和乘法的方法分析
2017/12/19 Python
Python中sort和sorted函数代码解析
2018/01/25 Python
浅谈Python中的私有变量
2018/02/28 Python
解决Python2.7中IDLE启动没有反应的问题
2018/11/30 Python
Python I/O与进程的详细讲解
2019/03/08 Python
Python 中Django验证码功能的实现代码
2019/06/20 Python
如何通过python的fabric包完成代码上传部署
2019/07/29 Python
Python 分发包中添加额外文件的方法
2019/08/16 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
解决jupyter notebook显示不全出现框框或者乱码问题
2020/04/09 Python
css3 border-image使用说明
2010/06/23 HTML / CSS
幼儿园保教管理制度
2014/02/03 职场文书
商学院大学生求职的自我评价
2014/03/12 职场文书
事业单位绩效考核实施方案
2014/03/27 职场文书
投标服务承诺书
2014/05/28 职场文书
2015年度绩效考核工作总结
2015/05/27 职场文书
基于flask实现五子棋小游戏
2021/05/25 Python
Java实现经典游戏泡泡堂的示例代码
2022/04/04 Java/Android