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


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 相关文章推荐
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
Jun 30 Javascript
基于jquery的无限级联下拉框js插件
Oct 29 Javascript
JQuery循环滚动图片代码
Dec 08 Javascript
jquery选择器、属性设置用法经验总结
Sep 08 Javascript
JS实现图片无间断滚动代码汇总
Jul 30 Javascript
基于BootStarp的Dailog
Apr 28 Javascript
javascript定时器取消定时器及优化方法
Jul 08 Javascript
Angularjs实现下拉框联动的示例代码
Aug 22 Javascript
Vue集成Iframe页面的方法示例
Dec 12 Javascript
vue中created和mounted的区别浅析
Aug 13 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
Feb 06 Javascript
微信小程序自定义支持图片的弹窗
Dec 21 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 ckeditor上传图片文件名乱码解决方法
2013/11/15 PHP
php 数组字符串搜索array_search技巧
2016/07/05 PHP
JavaScript 动态创建VML的方法
2009/10/14 Javascript
JS OffsetParent属性深入解析
2014/01/13 Javascript
JavaScript设计模式之工厂方法模式介绍
2014/12/28 Javascript
微信JS接口汇总及使用详解
2015/01/09 Javascript
D3.js中data(), enter() 和 exit()的问题详解
2015/08/17 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
2016/06/30 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
微信小程序商城项目之商品属性分类(4)
2017/04/17 Javascript
js提取中文拼音首字母的封装工具类
2018/03/12 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
2019/04/12 Javascript
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
python操作日期和时间的方法
2014/03/11 Python
编写Python CGI脚本的教程
2015/06/29 Python
python实现DES加密解密方法实例详解
2015/06/30 Python
Python文件处理
2016/02/29 Python
Python类的继承和多态代码详解
2017/12/27 Python
使用Python如何测试InnoDB与MyISAM的读写性能
2018/09/18 Python
Python中Unittest框架的具体使用
2019/08/27 Python
python文件读取失败怎么处理
2020/06/23 Python
Python识别验证码的实现示例
2020/09/30 Python
Expedia意大利旅游网站:酒店、机票和租车预订
2017/10/30 全球购物
Ellos瑞典官网:北欧地区时尚、美容和住宅领域领先的电子商务网站
2019/11/21 全球购物
煤矿班组长岗位职责
2013/12/29 职场文书
城建学院毕业生自荐信
2014/01/31 职场文书
《秋游》教学反思
2014/04/24 职场文书
2014年银行员工年终自我评价
2014/09/19 职场文书
2014年药店工作总结
2014/11/20 职场文书
担保书范本
2015/01/20 职场文书
教师节班会开场白
2015/06/01 职场文书
2019年最新借条范本!
2019/07/08 职场文书
导游词之无锡东林书院
2019/12/11 职场文书