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


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循环变量注册dom事件 之强大的闭包
Sep 08 Javascript
js创建对象的几种常用方式小结(推荐)
Oct 24 Javascript
三级下拉菜单的js实现代码
May 23 Javascript
javascript break指定标签打破多层循环示例
Jan 20 Javascript
jQuery $命名冲突解决方案汇总
Nov 13 Javascript
JS往数组中添加项性能分析
Feb 25 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
Sep 20 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
Jan 23 Javascript
Angular7创建项目、组件、服务以及服务的使用
Feb 19 Javascript
微信小程序利用云函数获取手机号码
Dec 17 Javascript
elementui实现预览图片组件二次封装
Dec 29 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
apache+php+mysql安装配置方法小结
2010/08/01 PHP
php微信公众平台示例代码分析(二)
2016/12/06 PHP
解密效果
2006/06/23 Javascript
input按钮的事件处理大全
2010/12/10 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
jquery中animate的stop()方法作用实例分析
2015/01/30 Javascript
基于insertBefore制作简单的循环插空效果
2015/09/21 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
2016/05/12 Javascript
jQuery中的通配符选择器使用总结
2016/05/30 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
2016/10/21 Javascript
VueJs 将接口用webpack代理到本地的方法
2017/11/27 Javascript
ionic2中使用自动生成器的方法
2018/03/04 Javascript
Angular事件之不同组件间传递数据的方法
2018/11/15 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
2018/12/05 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
2018/12/10 Javascript
JavaScript实现背景自动切换小案例
2019/09/27 Javascript
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
python正则表达式修复网站文章字体不统一的解决方法
2013/02/21 Python
跟老齐学Python之Import 模块
2014/10/13 Python
Python批量转换文件编码格式
2015/05/17 Python
Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法
2015/05/20 Python
Python告诉你木马程序的键盘记录原理
2019/02/02 Python
在python中计算ssim的方法(与Matlab结果一致)
2019/12/19 Python
Python面向对象编程基础实例分析
2020/01/17 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
python3.8.3安装教程及环境配置的详细教程(64-bit)
2020/11/28 Python
泰国的头号网上婴儿用品店:Motherhood.co.th
2019/04/09 全球购物
澳洲本土太阳镜品牌:Quay Australia
2019/07/29 全球购物
幼师自我鉴定范文
2013/10/01 职场文书
家电业务员岗位职责
2014/03/10 职场文书
庆元旦文艺演出主持词
2014/03/27 职场文书
爱心捐助倡议书
2014/05/19 职场文书
2015年入党决心书
2015/02/05 职场文书
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android