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


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实现简单图片轮换(只支持IE)
Dec 23 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
Apr 15 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
Apr 18 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
Mar 20 Javascript
jQuery找出网页上最高元素的方法
Mar 20 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
Feb 17 Javascript
基于jQuery实现收缩展开功能
Mar 18 Javascript
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 Javascript
详解node.js的http模块实例演示
Jul 12 Javascript
原生Javascript+HTML5一步步实现拖拽排序
Jun 12 Javascript
TS 类型兼容教程示例详解
Sep 23 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
模仿OSO的论坛(五)
2006/10/09 PHP
php 智能404跳转代码,适合换域名没改变目录的网站
2010/06/04 PHP
PHP获得数组交集与差集的方法
2015/06/10 PHP
CLASS_CONFUSION JS混淆 全源码
2007/12/12 Javascript
JavaScript使用技巧精萃[代码非常实用]
2008/11/21 Javascript
js中有关IE版本检测
2012/01/04 Javascript
javascript类型转换使用方法
2014/02/08 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
2016/10/27 Javascript
jQuery中绑定事件bind() on() live() one()的异同
2017/02/23 Javascript
js封装成插件的步骤方法
2017/09/11 Javascript
bootstrap响应式工具使用详解
2017/11/29 Javascript
JS实现的合并多个数组去重算法示例
2018/04/11 Javascript
ES6中let 和 const 的新特性
2018/09/03 Javascript
Javascript中弹窗confirm与prompt的区别
2018/10/26 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
pip安装Python库时遇到的问题及解决方法
2017/11/23 Python
如何在Python 游戏中模拟引力
2020/03/27 Python
几个数据库方面的面试题
2016/07/01 面试题
若干个Java基础面试题
2015/05/19 面试题
个人自我鉴定范文
2013/10/04 职场文书
中国文明网签名寄语
2014/01/18 职场文书
机械制造专业毕业生求职信
2014/03/02 职场文书
家长会主持词开场白
2014/03/18 职场文书
公司授权委托书
2014/04/04 职场文书
求职信范文大全
2014/05/26 职场文书
党员批评与自我批评发言
2014/10/02 职场文书
商铺租房协议书范本
2014/12/04 职场文书
开会通知短信大全
2015/04/20 职场文书
2016毕业实习单位评语大全
2015/12/01 职场文书
校园安全教育心得体会
2016/01/15 职场文书
《家》读后感:万惜拯救,冷暖自知
2019/09/25 职场文书
Apache Linkis 中间件架构及快速安装步骤
2022/03/16 Servers
Redis高可用集群redis-cluster详解
2022/03/20 Redis
Win11黑色桌面背景怎么办?Win11黑色壁纸解决方法汇总
2022/04/05 数码科技