小程序之路

Posted 2020-10-24 天道酬勤，勤能补拙。地道酬实，实能不弱。生有涯 力有限

转眼之间2017年马上就要过去，回顾这一年做小程序开发也就几个月了，是时候需要对于小程序做出一定的总结了。小程序我们可以理解为相当于安卓的App 最直接的方式，当然现在开发app 的方式很多 你可以使用Hbulider以及WebX5，我个人一开始并不看好小程序，但是没有办法客户需要做，小程序出来也就好久了，但是一直没有公众号那么火，学习了小程序我花了3天的时间左右，然后就是开发项目了。具体的小程序的学习的网址你可以进行参考https://mp.weixin.qq.com/debug/wxadoc/dev/index.html  微信的官方的网址进行学习。具体的我就不一一介绍了。

一.如果你是一个前端的开发人员那么只需要稍微改变一些基本的HTML =>WXML 的写法 以及 CSS=>=WXSS以及JS 稍微有点变化其他没有什么大的变化的。灵活的将JSON 列表和WXML 相互的结合发挥到极致的效果。开发微信小程序你需要进行安装一个微信开发工具。

二.如果你对于WebApi已经学习过或者已经上手过那么学习WebApi  还是非常的容易的。

三.关于微信小程序并结合到WebApi 来进行使用开发应用程序还是非常的快的。之前我一直在从事做微信公众号方面的开发，当我接触过小程序后才发现开发应用小程序是多么的方便以及快捷。所以朋友我建议你，如果后续需要进行应用程序方面的开发，我提倡并且建议你使用小程序做。真的很好用。

四.微信小程序方面API 的请求分为以下几类。API列表：

1.网络 API 列表：

API	说明
wx.request	发起网络请求
wx.uploadFile	上传文件
wx.downloadFile	下载文件
wx.connectSocket	创建 WebSocket 连接
wx.onSocketOpen	监听 WebSocket 打开
wx.onSocketError	监听 WebSocket 错误
wx.sendSocketMessage	发送 WebSocket 消息
wx.onSocketMessage	接受 WebSocket 消息
wx.closeSocket	关闭 WebSocket 连接
wx.onSocketClose	监听 WebSocket 关闭

2.媒体 API 列表：

API	说明
wx.chooseImage	从相册选择图片，或者拍照
wx.previewImage	预览图片
wx.startRecord	开始录音
wx.stopRecord	结束录音
wx.playVoice	播放语音
wx.pauseVoice	暂停播放语音
wx.stopVoice	结束播放语音
wx.getBackgroundAudioPlayerState	获取音乐播放状态
wx.playBackgroundAudio	播放音乐
wx.pauseBackgroundAudio	暂停播放音乐
wx.seekBackgroundAudio	控制音乐播放进度
wx.stopBackgroundAudio	停止播放音乐
wx.onBackgroundAudioPlay	监听音乐开始播放
wx.onBackgroundAudioPause	监听音乐暂停
wx.onBackgroundAudioStop	监听音乐结束
wx.chooseVideo	从相册选择视频，或者拍摄

文件 API 列表：

API	说明
wx.saveFile	保存文件
wx.getSavedFileList	获取已保存的文件列表
wx.getSavedFileInfo	获取已保存的文件信息
wx.removeSavedFile	删除已保存的文件信息
wx.openDocument	打开文件

3.数据 API 列表：

API	说明
wx.getStorage	获取本地数据缓存
wx.getStorageSync	获取本地数据缓存
wx.setStorage	设置本地数据缓存
wx.setStorageSync	设置本地数据缓存
wx.getStorageInfo	获取本地缓存的相关信息
wx.getStorageInfoSync	获取本地缓存的相关信息
wx.removeStorage	删除本地缓存内容
wx.removeStorageSync	删除本地缓存内容
wx.clearStorage	清理本地数据缓存
wx.clearStorageSync	清理本地数据缓存

4.位置 API 列表：

API	说明
wx.getLocation	获取当前位置
wx.chooseLocation	打开地图选择位置
wx.openLocation	打开内置地图
wx.createMapContext	地图组件控制

5.设备 API 列表：

API	说明
wx.getNetworkType	获取网络类型
wx.onNetworkStatusChange	监听网络状态变化
wx.getSystemInfo	获取系统信息
wx.getSystemInfoSync	获取系统信息
wx.onAccelerometerChange	监听加速度数据
wx.startAccelerometer	开始监听加速度数据
wx.stopAccelerometer	停止监听加速度数据
wx.onCompassChange	监听罗盘数据
wx.startCompass	开始监听罗盘数据
wx.stopCompass	停止监听罗盘数据
wx.setClipboardData	设置剪贴板内容
wx.getClipboardData	获取剪贴板内容
wx.makePhoneCall	拨打电话
wx.scanCode	扫码

6.界面 API 列表：

API	说明
wx.showToast	显示提示框
wx.showLoading	显示加载提示框
wx.hideToast	隐藏提示框
wx.hideLoading	隐藏提示框
wx.showModal	显示模态弹窗
wx.showActionSheet	显示菜单列表
wx.setNavigationBarTitle	设置当前页面标题
wx.showNavigationBarLoading	显示导航条加载动画
wx.hideNavigationBarLoading	隐藏导航条加载动画
wx.navigateTo	新窗口打开页面
wx.redirectTo	原窗口打开页面
wx.switchTab	切换到 tabbar 页面
wx.navigateBack	退回上一个页面
wx.createAnimation	动画
wx.createContext	创建绘图上下文
wx.drawCanvas	绘图
wx.stopPullDownRefresh	停止下拉刷新动画

7.WXML节点信息 API 列表：

API	说明
wx.createSelectorQuery	创建查询请求
selectorQuery.in	指定在哪个自定义组件中选取节点
selectorQuery.select	根据选择器选择单个节点
selectorQuery.selectAll	根据选择器选择全部节点
selectorQuery.selectViewport	选择显示区域
nodesRef.boundingClientRect	获取布局位置和尺寸
nodesRef.scrollOffset	获取滚动位置
nodesRef.fields	获取任意字段
selectorQuery.exec	执行查询请求

8.开放接口：

API	说明
wx.login	登录
wx.getUserInfo	获取用户信息
wx.chooseAddress	获取用户收货地址
wx.requestPayment	发起微信支付
wx.addCard	添加卡券
wx.openCard	打开卡券

 

五.开发的微信小程序。

2<!--index.wxml-->
<view class="container">
  <swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" class="banners" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{banner}}">
      <swiper-item class="banner" >
          <image src="{{item.image}}"  data-id="{{item.id}}" bindtap="bindViewTap" class="banner-image" width="100%" height="100%"/>
          <text class="banner-title">{{item.title}}</text>
      </swiper-item>
    </block>
  </swiper>
  <view class="news-item-container">
    <block wx:for="{{list}}" wx:for-index="id">
      <text wx:if="{{item.header}}" class="sub-title">{{item.header}}</text>
      <navigator wx:else url="../detail/detail?id={{item.id}}">
        <view class="news-item" >
          <view class="news-item-left">
            <text class="news-item-title">{{item.title}}</text>
          </view>
          <view class="news-item-right">
            <image src="{{item.images[0]}}" class="news-image"/>
          </view>
        </view>
      </navigator>
    </block>
    <button type="primary" class="load-btn"  loading="{{loading}}" plain="{{plain}}" bindtap="loadMore"> 更多 </button>
  </view>
  
</view>

//index.js
//获取应用实例
var app = getApp()
var utils = require(‘../../utils/util.js‘)
Page({
  data: {
    list: [],
    duration: 2000,
    indicatorDots: true,
    autoplay: true,
    interval: 3000,
    loading: false,
    plain: false
  },
  //事件处理函数
  bindViewTap(e) {
    wx.navigateTo({
      url: ‘../detail/detail?id=‘ + e.target.dataset.id
    })
  },
  loadMore (e) {
    if (this.data.list.length === 0) return
    var date = this.getNextDate()
    var that = this
    that.setData({ loading: true })
    wx.request({
      url: ‘http://news.at.zhihu.com/api/4/news/before/‘ + (Number(utils.formatDate(date)) + 1),
      headers: {
        ‘Content-Type‘: ‘application/json‘
      },
      success (res) {
         that.setData({
           loading: false,
           list: that.data.list.concat([{ header: utils.formatDate(date, ‘-‘) }]).concat(res.data.stories)
         })
      }
    })
  },
  getNextDate (){
    const now = new Date()
    now.setDate(now.getDate() - this.index++)
    return now
  },
  onLoad () {
    let that = this
    wx.request({
      url: ‘http://news-at.zhihu.com/api/4/news/latest‘,
      headers: {
        ‘Content-Type‘: ‘application/json‘
      },
      success (res) {
         that.setData({
           banner: res.data.top_stories,
           list: [{ header: ‘今日热闻‘ }].concat(res.data.stories)
         })
      }
    })
    this.index = 1
  }
})

　关于小程序的开发文档大家可以参考W3C :　https://www.w3cschool.cn/weixinapp/9wou1q8j.html       2018/2/12  00：12 ：46