手把手教你写一个微信小程序£¨推荐£©

 更新时间£º2018年10月17日 11:10:55   作者£ºFannieGirl   我要评论

最近接了一个微信小程序的项目£¬项目需求是小程序语音识别£¬全景图片观看£¬登录授权£¬获取个人基本信息¡£非常不错£¬具有一定的参考借鉴价值£¬需要的朋友参考下吧

需求

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

一£º基础框架

¡¡¡¡官方开发文档£ºhttps://developers.weixin.qq.com/miniprogram/dev/ £¨其实官方文档写的很清楚了£©

1.跟着官方文档一步一步来£¬新建一个小程序项目就好

2.然后呢£¬毕竟默认的只是基本骨架£¬肌肉线条还是要自己填的

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

¡¡¡¡小程序的所有页面路径¡¢界面表现¡¢网络超时时间¡¢底部 tab

¡¡¡¡需求一£º底部tab£¬我们要像原生APP那样要有是三个常驻的按钮£¬切换页面

在app.json 文件中添加下面的代码就可以了

还?#20449;¶£?#19968;定要配置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 所?#20449;?#32622;£¬一般需求都可?#26376;?#36275;

¡¡¡¡贴心的贴上官方链接£º

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

¡¡¡¡如图£º

¡¡¡¡

1.官方api 地址£º

//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 之后才返回
       // 所?#28304;?#22788;加入 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.

总结

以上所述是小编给大家分享的手把手教你写一个微信小程序£¬希望?#28304;?#23478;有所帮助£¬如果大家有任?#25105;ÉÎ是?#32473;我留言£¬小编会及时回复大家的¡£在此也非常感谢大家对脚本之家网站的支持£¡

相关文章

  • js控制表单操作的常用代码小结

    js控制表单操作的常用代码小结

    本文章来给各位同学收集一些在WEB前台开发中常用的一些控制表单操作函数£¬有需要的朋友可以参考一下
    2013-08-08
  • JavaScript实现计数器基础方法

    JavaScript实现计数器基础方法

    这篇文?#36718;?#35201;为大家详细介绍了JavaScript实现计数器的基础方法 £¬具有一定的参?#25216;?#20540;£¬感兴趣的小伙伴们可以参考一下
    2017-10-10
  • js点击button按钮跳转到另一个新页面

    js点击button按钮跳转到另一个新页面

    点击按钮怎么跳转到另外一个页面呢£¿点击图片要跳转到新的页面时£¬怎么做到呢£¿可以使用onclick=window.location=新页面?#35789;?#29616;
    2014-10-10
  • webpack2.0配置postcss-loader的方法

    webpack2.0配置postcss-loader的方法

    本篇文?#36718;?#35201;介绍了webpack2.0配置postcss-loader的方法£¬小编觉得挺不错的£¬现在分享给大家£¬也给大家做个参考¡£一起跟随小编过来看看吧
    2017-08-08
  • React 组件间的通信示例

    React 组件间的通信示例

    这篇文?#36718;?#35201;介绍了React 组件间的通信示例£¬主要通信划分为三种£¬小编觉得挺不错的£¬现在分享给大家£¬也给大家做个参考¡£一起跟随小编过来看看吧
    2018-06-06
  • window.open关于浏览器拦截问题分析及解决方法

    window.open关于浏览器拦截问题分析及解决方法

    window.open是javascript函数£¬该函数的作用是打开一个新窗口或这改变原来的窗口,如果你直接在js中调用window.open()函数去打开一个新窗口£¬浏览器会拦截你,那么如何避免呢£¬感兴趣的朋友可以了解下本文或许对你学习有所帮助
    2013-02-02
  • 延时加载JavaScript代码提高速度

    延时加载JavaScript代码提高速度

    这篇文?#36718;?#35201;介绍了延时加载JavaScript代码提高速度的相关资料,需要的朋友可以参考下
    2015-12-12
  • Javascript 调用 ActionScript 的简单方法

    Javascript 调用 ActionScript 的简单方法

    在Flex中£¬ActionScript调用Javascript是比较简单的£¬说白了就是£¬在html里£¬怎么调用Javascript£¬在ActionScript就怎么调用就可以了¡£接下来通过本文给大家介绍js 调用 actionscript方法£¬感兴趣的朋友一起看看吧
    2016-09-09
  • 纯JS实现五子棋游戏兼容各浏览器(附源码)

    纯JS实现五子棋游戏兼容各浏览器(附源码)

    纯JS实现五子棋游戏同时兼容各个主流浏览器,感兴趣的朋友可以下载源码学习下也是对你js技巧的晋级
    2013-04-04
  • js实现select组件的选择输入过滤代码

    js实现select组件的选择输入过滤代码

    如何实现select组件的选择输入过滤作用£¬下面有一段js代码£¬很实用£¬需要的朋友可以看看
    2014-10-10

最新评论

常用在线小工具

ÁÉÄþ35Ñ¡7¿ª½±½á¹û