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


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放大镜效果
Dec 08 Javascript
jquery动态添加元素事件失效问题解决方法
May 23 Javascript
jQuery窗口、文档、网页各种高度的精确理解
Jul 02 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
Aug 25 Javascript
举例讲解JavaScript中关于对象操作的相关知识
Nov 16 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
Jan 04 Javascript
BOM系列第二篇之定时器requestAnimationFrame
Aug 17 Javascript
angularjs实现下拉列表的选中事件示例
Mar 03 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
Aug 31 Javascript
vue实现全选和反选功能
Aug 31 Javascript
jquery+php后台实现省市区联动功能示例
May 23 jQuery
微信小程序开发之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中神奇的fastcgi_finish_request
2011/05/02 PHP
php简单浏览目录内容的实现代码
2013/06/07 PHP
PHP二维数组排序的3种方法和自定义函数分享
2014/04/09 PHP
PHP正则匹配日期和时间(时间戳转换)的实例代码
2016/12/14 PHP
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
2007/03/08 Javascript
javascript RadioButtonList获取选中值
2009/04/09 Javascript
jquery选择器之属性过滤选择器详解
2014/01/27 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
2014/05/04 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
2015/05/13 Javascript
angular.js分页代码的实例
2016/07/27 Javascript
jQuery动态创建元素以及追加节点的实现方法
2016/10/20 Javascript
微信小程序 绘图之饼图实现
2016/10/24 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
微信小程序支付之c#后台实现方法
2017/10/19 Javascript
JavaScript分步实现一个出生日期的正则表达式
2018/03/22 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
js实现旋转木马轮播图效果
2020/01/10 Javascript
JS跨浏览器解析XML应用过程详解
2020/10/16 Javascript
Ant Design Pro 之 ProTable使用操作
2020/10/31 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
Python中的迭代器漫谈
2015/02/03 Python
使用pyecharts在jupyter notebook上绘图
2020/04/23 Python
python做量化投资系列之比特币初始配置
2018/01/23 Python
Python Django Vue 项目创建过程详解
2019/07/29 Python
python torch.utils.data.DataLoader使用方法
2020/04/02 Python
解决python cv2.imread 读取中文路径的图片返回为None的问题
2020/06/02 Python
Matplotlib自定义坐标轴刻度的实现示例
2020/06/18 Python
python suds访问webservice服务实现
2020/06/26 Python
基于python图书馆管理系统设计实例详解
2020/08/05 Python
欧洲高端品牌直销店:Fashionesta
2016/08/31 全球购物
英国玛莎百货澳大利亚:Marks & Spencer Australia
2019/08/30 全球购物
公务员年总结的自我评价
2013/10/25 职场文书
特此通知格式
2015/04/27 职场文书
如何利用python实现Simhash算法
2022/06/28 Python
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android