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


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 相关文章推荐
javascript XML数据显示为HTML一例
Dec 23 Javascript
JS中confirm,alert,prompt函数区别分析
Jan 17 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
Mar 11 Javascript
javascript实现分栏显示小技巧附图
Oct 13 Javascript
setTimeout内不支持jquery的选择器的解决方案
Apr 28 Javascript
JavaScript获取数组最小值和最大值的方法
Jun 09 Javascript
基于jQuery Ajax实现上传文件
Mar 24 Javascript
jquery插件bootstrapValidator表单验证详解
Dec 15 Javascript
浅谈Javascript事件对象
Feb 05 Javascript
JS回调函数简单用法示例
Feb 09 Javascript
vue-cli实现多页面多路由的示例代码
Jan 30 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
Feb 22 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
php Smarty初体验二 获取配置信息
2011/08/08 PHP
PHP stripos()函数及注意事项的分析
2013/06/08 PHP
php stream_get_meta_data返回值
2013/09/29 PHP
实现获取http内容的php函数分享
2014/02/16 PHP
PHP中使用foreach()遍历二维数组的简单实例
2016/06/13 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
js实现运行代码需要刷新的解决方法
2007/08/18 Javascript
Javascript Math对象
2009/08/13 Javascript
JavaScript实现找质数代码分享
2015/03/24 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
2016/05/28 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
ionic2 tabs使用 Modal底部tab弹出框
2016/12/30 Javascript
详解Angular 4.x Injector
2017/05/04 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
2017/10/27 Javascript
详解React+Koa实现服务端渲染(SSR)
2018/05/23 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
单页面vue引入百度统计的使用方法示例详解
2018/10/13 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
python条件和循环的使用方法
2013/11/01 Python
举例讲解Linux系统下Python调用系统Shell的方法
2015/11/07 Python
Python3 适合初学者学习的银行账户登录系统实例
2017/08/08 Python
对python修改xml文件的节点值方法详解
2018/12/24 Python
解决tensorflow 释放图,删除变量问题
2020/06/23 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
canvas环形倒计时组件的示例代码
2018/06/14 HTML / CSS
Bobbi Brown芭比波朗美国官网:化妆师专业彩妆保养品品牌
2016/08/18 全球购物
Gloeilampgoedkoop荷兰:在线购买灯泡
2019/02/16 全球购物
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
通用求职信范文模板分享
2013/12/27 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
2014年法院个人工作总结
2014/12/17 职场文书
拖欠货款起诉状
2015/05/20 职场文书
初二数学教学反思
2016/02/17 职场文书
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
2021/04/12 Python
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android