官方的开发文档

微信小程序写的不多,随便写写

创建项目,分析工具
微信小程序有专门的编辑工具,去官网下载
然后申请一个小程序项目,获得一个appId,然后进入编辑工具就可以直接开发了
编辑工具可以设置es6编译和npm

文件分析
小程序的写法非常的像vue-cli,但是vue是一个vue文件带有html+js+css
小程序是一个页面分为四个文件,wxml+js+wxss+json(配置页面)
还有一个app.json总配置页面,一个app.js入口文件,一个app.wxss的全局css文件

新建页面

  • 在目录树上右键,选择新建 Page,将自动生成页面所需要的 wxml、wxss、js、json
  • 在 app.json 的 pages 字段,添加需要新建的页面的路径,将会自动生成该页面所需要的文件

app.json

  • 页面要被识别必须配置在app.json的page数组里,数组的第一个就是打开小程序的第一个页面,这个page数组就是vue的router.js
  • 小程序的底部菜单tabbar栏也是在这个文件里配置的,可以配置文字,图标,被选中的图标,点击的路由
  • 还有个window的对象是配置小程序的顶部颜色什么的,这个文件很重要,配置查看官方文档

app.js
入口文件就是main.js,用来配置插件什么的,还有就是在入口文件的生命周期里执行用户登陆,获取用户信息什么的

wxss
wxss的图片引入需使用外链地址;
没有 Body;
样式可直接使用 import 导入;
字体宽高用vw和vh最好

生命周期

  1. onLaunch: function(options) {
  2. // 监听小程序初始化。小程序初始化完成时(全局只触发一次)
  3. },
  4. onReady: function(options) {
  5. // 页面初次渲染完成
  6. // 一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。
  7. },
  8. onShow: function(options) {
  9. // 监听小程序显示。小程序启动,或从后台进入前台显示时,执行很多次
  10. },
  11. onHide: function() {
  12. // 监听小程序隐藏。小程序从前台进入后台时。
  13. },
  14. onUnload: function() {
  15. // 当redirectTo或navigateBack的时候调用。
  16. // Do something when page close.
  17. },
  18. onPullDownRefresh: function() {
  19. // 监听用户下拉动作
  20. // 需要在页面json里配置 "enablePullDownRefresh": true
  21. },
  22. onReachBottom: function() {
  23. // 页面上拉触底事件的处理函数
  24. // 需要在页面json里配置 "enablePullDownRefresh": true
  25. },
  26. onShareAppMessage: function () {
  27. // 用户点击右上角转发
  28. },
  29. onPageScroll: function() {
  30. // 页面滚动触发事件的处理函数
  31. },
  32. onResize: function() {
  33. // 页面尺寸改变时触发
  34. },
  35. onTabItemTap(item) {
  36. // 当前是 tab 页时,点击 tab 时触发
  37. console.log(item.index)
  38. console.log(item.pagePath)
  39. console.log(item.text)
  40. },

渲染

  1. // 数据绑定
  2. <checkbox checked="{{xx}}"
  3. id="item-{{id}}"
  4. hidden="{{flag ? true : false}}">{{ name }}</checkbox>
  5. // 条件渲染
  6. <view wx:if="{{length > 5}}"> 1 </view>
  7. <view wx:elif="{{length > 2}}"> 2 </view>
  8. <view wx:else> 3 </view>
  9. // 循环渲染
  10. <view wx:for="{{array}}" wx:for-index="idx" wx:for-item="item" wx:key="idx">
  11. {{idx}}: {{item.name}}
  12. </view>

组件
小程序的组件就是指html的标签,不过是内部的标签,微信对标签进行了封装,自带了像轮播图,图标icon组件,还有地图,画布,摄像头等等东西,让开发便捷了很多
小程序里没有div,view组件就是div

API
微信内置的方法,有登陆的,转格式的,上传文件的,发起请求的,路由跳转的,定时器,websocket,地图的,获取位置的,选择相册图片,视频,音频,画布,录音,相机,富文本,支付,扫码甚至微信运动,蓝牙,NFC充值,卡包,手机电量,陀螺仪,移动方向等等

请求响应
小程序也是用的跨域接口,需要在微信小程序后台配置接口白名单,配置后就可以访问了,必须是域名的,不能是localhost或者ip地址

数据传递

  • 在app.js里有个全局数据对象
  1. globalData:{
  2. userInfonull
  3. }
  4. // 获取
  5. var app=getApp();//取得全局App({..})实例
  6. var userInfo = app.globalData.userInfo;//取得全局变量需要的值
  7. // 获取data的值
  8. var xx = this.data.xx
  • 通过本地缓存,setStorage和getStorage
  • 通过路由传参
  1. wx.navigateTo({
  2. url: \'/pages/item/item?url=\' + e.target.dataset.url
  3. })
  4. onLoad: function (options) {
  5. var that = this;
  6. console.log(options.url)
  7. }
  • 从标签上获取data值
  1. <view bindtap="play" data-xx="xx"></view>
  2. play:function(event){
  3. var xx= event.currentTarget.dataset.xx;
  4. }

路由跳转

  • navigateTo 保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
  • redirectTo 关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
  • reLaunch 关闭所有页面,打开到应用内的某个页面
  • switchTab 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

接入资源
腾讯自己家的东西都带有小程序接入的功能
比如腾讯地图
比如腾讯视频
具体查看文档

内置组件
其实也不是内置,也需要自己下载
就是weui-weapp,在微信小程序官方文档的拓展能力里有如何使用的教程

外来组件
vant-weapp
通过npm下载安装就行,用一些弹窗什么的很爽

小程序框架

  • 美团点评:mpvue
  • 京东:Taro
  • 腾讯:WePY

总结:京东的是 React 方式编码,其他多数是vue方式。不考虑框架

发布
代码写完,可以直接在开发工具里提交,然后等待微信工作人员审核,审核完毕可以就可以去到微信小程序后台点击发布,就可以在手机微信里找到这个小程序了

最后总结
小程序只要js基础好,写过vue,上手非常的快,特别是在微信平台上开发,兼容等问题就很少了,而且API特别的多,去看官网就知道,真正的copy型程序员诞生之路

app.js

  1. App({
  2. onLaunch: function () {
  3. //调用API从本地缓存中获取数据
  4. var logs = wx.getStorageSync(\'logs\') || []
  5. logs.unshift(Date.now())
  6. wx.setStorageSync(\'logs\', logs)
  7. },
  8. getUserInfo:function(cb){
  9. var that = this
  10. if(this.globalData.userInfo){
  11. typeof cb == "function" && cb(this.globalData.userInfo)
  12. }else{
  13. //调用登录接口
  14. wx.login({
  15. success: function () {
  16. wx.getUserInfo({
  17. success: function (res) {
  18. that.globalData.userInfo = res.userInfo
  19. typeof cb == "function" && cb(that.globalData.userInfo)
  20. }
  21. })
  22. }
  23. })
  24. }
  25. },
  26. globalData:{
  27. userInfo:null
  28. }
  29. })

版权声明:本文为pengdt原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/pengdt/p/12072482.html