微信小程序是什么

Posted 2021-03-22 一个年轻淫

官方的开发文档

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

创建项目，分析工具
微信小程序有专门的编辑工具，去官网下载
然后申请一个小程序项目，获得一个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最好

生命周期

onLaunch: function(options) {
    // 监听小程序初始化。小程序初始化完成时（全局只触发一次）
},
onReady:  function(options) {
   // 页面初次渲染完成
   // 一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
},
onShow: function(options) {
    // 监听小程序显示。小程序启动，或从后台进入前台显示时，执行很多次
},
onHide: function() {
    // 监听小程序隐藏。小程序从前台进入后台时。
},
onUnload: function() {
    // 当redirectTo或navigateBack的时候调用。
    // Do something when page close.
},
onPullDownRefresh: function() {
    // 监听用户下拉动作
    // 需要在页面json里配置 "enablePullDownRefresh": true
},
onReachBottom: function() {
    // 页面上拉触底事件的处理函数
    // 需要在页面json里配置 "enablePullDownRefresh": true
},
onShareAppMessage: function () {
    // 用户点击右上角转发
},
onPageScroll: function() {
    // 页面滚动触发事件的处理函数
},
onResize: function() {
    // 页面尺寸改变时触发
},
onTabItemTap(item) {
    // 当前是 tab 页时，点击 tab 时触发
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
},

渲染

// 数据绑定
<checkbox checked="{{xx}}" 
          id="item-{{id}}" 
          hidden="{{flag ? true : false}}">{{ name }}</checkbox>

// 条件渲染
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

// 循环渲染
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="item" wx:key="idx">
  {{idx}}: {{item.name}}
</view>

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

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

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

数据传递

• 在app.js里有个全局数据对象

globalData：{
   userInfo：null
}
// 获取
var app=getApp();//取得全局App({..})实例
var userInfo = app.globalData.userInfo;//取得全局变量需要的值
// 获取data的值
var xx = this.data.xx

• 通过本地缓存，setStorage和getStorage
• 通过路由传参

wx.navigateTo({
 url: '/pages/item/item?url=' + e.target.dataset.url
})

onLoad: function (options) {
var that = this;
console.log(options.url)
}

• 从标签上获取data值

<view bindtap="play" data-xx="xx"></view>
play:function(event){
     var xx= event.currentTarget.dataset.xx;
}

路由跳转

• 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

App({
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  globalData:{
    userInfo:null
  }
})

有时间补充个自定义组件