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


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 相关文章推荐
js 加载时自动调整图片大小
May 28 Javascript
get(0).tagName获得作用标签示例代码
Oct 08 Javascript
详解Javascript动态操作CSS
Dec 08 Javascript
浅谈JavaScript中运算符的优先级
Jul 07 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 Javascript
jquery attr()设置和获取属性值实例教程
Sep 25 Javascript
js中字符型和数值型数字的互相转化方法(必看)
Apr 25 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
Mar 20 Javascript
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
Vue组件实现触底判断
Jun 26 Javascript
three.js利用卷积法如何实现物体描边效果
Nov 27 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计算几分钟前、几小时前、几天前的几个函数、类分享
2014/04/09 PHP
PHP 前加at符合@的作用解析
2015/07/31 PHP
基于PHP的加载类操作以及其他两种魔术方法的应用实例
2017/08/28 PHP
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
2009/11/30 Javascript
学习JavaScript的最佳方法分享
2011/10/21 Javascript
JS跨域代码片段
2012/08/30 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
js获取select默认选中的Option并不是当前选中值
2014/05/07 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
Vue.js每天必学之组件与组件间的通信
2016/09/08 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
AngularJS实现表单元素值绑定操作示例
2017/10/11 Javascript
关于Angularjs中跨域设置白名单问题
2018/04/17 Javascript
jQuery实现模糊查询的方法分析
2018/05/10 jQuery
微信小程序常用简易小函数总结
2019/02/01 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
2019/11/23 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
2020/04/27 Javascript
[30:55]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第二场 11.18
2020/11/18 DOTA
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
Python实现去除图片中指定颜色的像素功能示例
2019/04/13 Python
树莓派用python中的OpenCV输出USB摄像头画面
2019/06/22 Python
Python描述符descriptor使用原理解析
2020/03/21 Python
浅谈keras中自定义二分类任务评价指标metrics的方法以及代码
2020/06/11 Python
python从Oracle读取数据生成图表
2020/10/14 Python
阿迪达斯意大利在线商店:adidas意大利
2016/09/19 全球购物
伦敦一家非常流行的时尚精品店:Oxygen Boutique
2017/01/15 全球购物
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
倡议书格式
2014/04/14 职场文书
就业意向书
2014/07/29 职场文书
四风问题个人对照检查材料
2014/09/26 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
病危通知书样本
2015/04/17 职场文书
2016拓展训练心得体会范文
2016/01/12 职场文书
SQL Server连接查询的实用教程
2021/04/07 SQL Server
使用Django框架创建项目
2022/06/10 Python