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


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实现简单登录功能的实例代码
Nov 09 Javascript
jquery鼠标停止移动事件
Dec 21 Javascript
JS获取图片高度宽度的方法分享
Apr 17 Javascript
smartcrop.js智能图片裁剪库
Oct 14 Javascript
JavaScript编程中window的location与history对象详解
Oct 26 Javascript
浅析JavaScript回调函数应用
May 22 Javascript
jQuery 插件封装的方法
Nov 16 Javascript
js实现带简单弹性运动的导航条
Feb 22 Javascript
关于foreach循环中遇到的问题小结
May 08 Javascript
zTree树形插件异步加载方法详解
Jun 14 Javascript
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
BootStrap前端框架使用方法详解
Feb 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
PHP开发规范手册之PHP代码规范详解
2011/01/13 PHP
PHP中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
自己写的php curl库实现整站克隆功能
2015/02/12 PHP
php计算到指定日期还有多少天的方法
2015/04/14 PHP
PHP中FTP相关函数小结
2016/07/15 PHP
浏览器无法运行JAVA脚本的解决方法
2008/01/09 Javascript
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
判断文档离浏览器顶部的距离的方法
2014/01/08 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
简介JavaScript中search()方法的使用
2015/06/06 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
JS数组合并push与concat区别分析
2015/12/17 Javascript
js流动式效果显示当前系统时间
2016/05/16 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
使用yeoman构建angular应用的方法
2017/08/14 Javascript
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
Python 功能和特点(新手必学)
2015/12/30 Python
浅谈python中的正则表达式(re模块)
2017/10/17 Python
Python命名空间的本质和加载顺序
2018/12/17 Python
Python Django Vue 项目创建过程详解
2019/07/29 Python
python文件绝对路径写法介绍(windows)
2019/12/25 Python
利用Pytorch实现简单的线性回归算法
2020/01/15 Python
Django 后台带有字典的列表数据与页面js交互实例
2020/04/03 Python
python爬取代理ip的示例
2020/12/18 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
公司活动策划方案
2014/01/13 职场文书
小学班干部竞选演讲稿
2014/04/24 职场文书
建材投资建议书
2014/05/16 职场文书
先进党组织事迹材料
2014/12/26 职场文书
房屋所有权证明
2015/06/19 职场文书
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js
python_tkinter事件类型详情
2022/03/20 Python
Golang入门之计时器
2022/05/04 Golang