微信小程序基础

作者: 魔王哪吒 | 来源:发表于2018-08-20 23:39 被阅读196次
    标题图

    前言

    什么是微信小程序,它是一种轻量级的APP,它与常规App来说,无需下载安装即可使用,它嵌于微信App中,要使用微信小程序你只需要搜索一下微信小程序的名称就好,如近期的“Google的画图”小程序等,小程序不同于APP一点的是,小程序成本低,前期宣传,可以靠扫描二维码,分享群,朋友圈等,来提高微信小程序的使用。无需安装即可下载的特点,也深受广大群众的喜欢。

    介绍

    小程序是一种用完即走的那么一种模式,从开始的B2C模式,人与商品,到P2P模式,人与人,在到C2P模式,人与服务。

    小程序就是那么一种人与服务,小程序不用下载?

    不是的,只是它的下载很小,你根本体会不到它的下载,而且对于那种要停留下来很久的,小程序一般不适用,对于订票,购票,小游戏,等。

    用于对某款APP中的某功能划分出来做小程序很实用,是用来服务人的产品,想我们手机中的支付宝,里面有很多功能镶入到框框里。

    如今,小程序的日常应用,如去一家店吃面时,不用叫服务员点餐而是有个二维码在你的桌上,用你的手机扫一扫就行。


    微信小程序的招喜特点

    微信小程序实现了“触手可及”的梦想,用户扫一扫或在微信内部搜一搜就可找到应用即可使用,也体现了“用完即走”的概念,无需下载与安装,小程序也具有APP应用软件的大部分实现的功能,无处不在,应用方便,这使得小程序的热度不同上涨。

    微信小程序的使用

    这里微信小程序的使用,开发,可自行百度,自己注册一个自己的小程序,这很简单,点击了解开发内容:微信小程序开发基础微信小程序框架与组件,看完即可。

    调式的功能

    每款开发工具具有调式的功能才会有人支持,微信小程序的调用工具有Console,Sources,Network,Storage,AppData,wxml等,微信小程序上有个调式器的按钮就是了。

    Console的窗口就是用来显示小程序的输出的错误信息和调式的代码。
    Sources窗口是用来显示当前项目的脚本文件,看到的这些文件时通过处理后的脚本文件。
    Network是用来查看发送的请求信息和调用文件的信息。
    Storage窗口是用来显示当前项目使用wx.setStoragewx.setStoraeSync的情况。
    AppData窗口是用来显示当前项目,具体详细,数据情况的。
    Wxml窗口是用来帮助开发者开发wxml转换后的界面,在这可以看到页面的结构,和wxss的相关属性,如同在网页可以查看代码一样的。

    微信小程序配置

    框架配置文件.png

    这里直接复制小程序自动生成的代码:

    //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
      }
    })
    
    {
      // 配置页面路径
      "pages":[
        "pages/index/index",
        "pages/logs/logs"
      ],
      // 配置窗口的表现
      "window":{
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "dashucoding",
        "navigationBarTextStyle":"black"
      },
      // 配置标签的导航
      "tabBar": {
        "list": [{
          "pagePath": "pages/index/index",
          "text": "sy"
        },{
          "pagePath": "pages/logs/logs",
          "text": "rz"
        }]
      },
      // 配置网络超时
      "networkTimeout": {
        "request": 10000,
        "downloadFile": 10000
      },
      // 配置debug模式
      "debug": true
    }
    

    窗口的表现属性

    表现属性:状态栏,导航条,标题,窗口背景

    设置导航条的背景颜色:navigationBarBackgroundColor
    设置导航条文字:navigationBarTitleText
    设置导航条文字颜色:navigationBarTextStyle
    设置窗口是否支持下拉刷新:enablePullDownRefresh
    设置窗口的背景颜色:backgroundColor
    下拉 loading 的样式,仅支持 dark / light:backgroundTextStyle

    默认的全局样式

    /**app.wxss**/
    .container {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 200rpx 0;
      box-sizing: border-box;
    } 
    

    工具类文件

    // utils.js 存放工具来的文件
    const formatTime = date => {
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      const hour = date.getHours()
      const minute = date.getMinutes()
      const second = date.getSeconds()
    
      return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
    }
    
    const formatNumber = n => {
      n = n.toString()
      return n[1] ? n : '0' + n
    }
    // 通过 module.exports 将定义的函数名称进行注册,才可以让其他页面使用
    module.exports = {
      formatTime: formatTime
    }
    

    页面文件

    框架页面文件.png

    逻辑层

    小程序的逻辑层编写类似JavaScript,但是扩充了一些内容,也有的地方有写变动。主要的App()Page方法。

    App()注册APP

    App() 函数用来注册一个小程序,接收一个object 参数,用来指定小程序的生命周期函数等。

    示例代码:

    App({
      onLaunch: function(options) {
        // Do something initial when launch.
      },
      onShow: function(options) {
        // Do something when show.
      },
      onHide: function() {
        // Do something when hide.
      },
      onError: function(msg) {
        console.log(msg)
      },
      globalData: 'I am global data'
    })
    

    getApp()方法可以用来获取到小程序实例。

    // other.js
    var appInstance = getApp()
    // I am global data
    console.log(appInstance.globalData) 
    

    注意:

    注意

    Page()注册页面

    函数Page()用来注册一个页面,接受一个 Object 参数,其指定页面的初始数据、生命周期函数和事件处理函数等。

    示例代码:

    //index.js
    Page({
      data: {
        text: "This is page data."
      },
      onLoad: function(options) {
        // Do some initialize when page load.
      },
      onReady: function() {
        // Do something when page ready.
      },
      onShow: function() {
        // Do something when page show.
      },
      onHide: function() {
        // Do something when page hide.
      },
      onUnload: function() {
        // Do something when page close.
      },
      onPullDownRefresh: function() {
        // Do something when pull down.
      },
      onReachBottom: function() {
        // Do something when page reach bottom.
      },
      onShareAppMessage: function () {
        // return custom share data when user share.
      },
      onPageScroll: function() {
        // Do something when page scroll
      },
      onTabItemTap(item) {
        console.log(item.index)
        console.log(item.pagePath)
        console.log(item.text)
      },
      // Event handler.
      viewTap: function() {
        this.setData({
          text: 'Set some data for updating view.'
        }, function() {
          // this is setData callback
        })
      },
      customData: {
        hi: 'MINA'
      }
    })
    

    视图层

    视图层.png 微信小程序视图层.png

    微信小程序组件

    微信小程序组件.png

    微信小程序API

    wx.request(OBJECT)发起网络请求

    从网络上找到一个数据地址:http://www.phonegap100.com/appapi.php?a=getPortalCate

    <!--index.wxml-->
    <view  wx:for="{{logs}}" wx:for-item="value">
      {{value.catname}}
    </view>
    
    //index.js
    //获取应用实例
    const app = getApp()
    
    Page({
      data: {
       
      },
      //事件处理函数
      bindViewTap: function() {
        wx.navigateTo({
          url: '../logs/logs'
        })
      },
      onLoad: function () {
        var that = this;
        wx.request({
          // 开发者服务器接口地址
          url: 'http://www.phonegap100.com/appapi.php?a=getPortalCate', //仅为示例,并非真实的接口地址
          data: {
            // 请求的参数    
          },
          // 有效值:OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT  
          method: 'GET',
          // 设置请求的 header,header 中不能设置 Referer。
          header: {
            'content-type': 'application/json' // 默认值
          },
          // 收到开发者服务成功返回的回调函数
          success: function (res) {
            // 开发者服务器返回的数据
            console.log(res.data)
            that.setData({
              logs:res.data.result
            })
          }
        })
      }
    })
    

    获取的数据:

    获取的数据 显示的数据

    文件的上传,下载

    wx.chooseImage(OBJECT)API调用
    微信小程序开发上传图片功能实例

    效果图
    <!--index.wxml-->
    <view style='padding:1rem'>
        <button type="primary"bindtap="chooseimage" >上传图片</button> 
        <image src="{{tempFilePaths}}" style=' width:100%; height:900rpx; margin:1rem 0;'/>  
    </view>
    
    //index.js
    //获取应用实例  
    var app = getApp()
    Page({
      data: {
        tempFilePaths: '',
      },
      /** 
       * 上传图片
       */
      chooseimage: function() {
        var _this = this;
        wx.chooseImage({
          count: 1, // 默认9  
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
          // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片   
          success: function(res) {
            //提示上传成功
            wx.showToast({
              title: '上传成功',
              icon: 'success',
              duration: 2000
            });
            _this.setData({
              tempFilePaths: res.tempFilePaths
            })
          }
        })
      }
    })
    

    WebSocket会话API

    利用WebSocket会话可以用来创建一个会话连接,它可以通信,如聊天等。

    wx.connectSocket(OBJECT).png

    示例代码:

    wx.connectSocket({
      url: 'wss://example.qq.com',
      data:{
        x: '',
        y: ''
      },
      header:{ 
        'content-type': 'application/json'
      },
      protocols: ['protocol1'],
      method:"GET"
    })
    

    常用的api调用

    1.wx.onSocketOpen(CALLBACK)监听WebSocket连接打开事件
    2.wx.onSocketError(CALLBACK)监听WebSocket错误
    3.wx.sendSocketMessage(OBJECT)通过 WebSocket连接发送数据
    4.wx.onSocketMessage(CALLBACK)监听WebSocket接受到服务器的消息事件
    5.wx.closeSocket(OBJECT)关闭 WebSocket 连接
    6.wx.onSocketClose(CALLBACK)监听WebSocket关闭

    它会用到的API.png

    图片处理提供的API

    图片处理提供的API.png

    API官方参考

    参考地址:https://developers.weixin.qq.com/miniprogram/dev/api/

    小结

    重点知识

    结语

    • 本文主要讲解 微信小程序基础
    • 下面我将继续对其他知识 深入讲解 ,有兴趣可以继续关注
    • 小礼物走一走 or 点赞
    送❤

    相关文章

      网友评论

        本文标题:微信小程序基础

        本文链接:https://www.haomeiwen.com/subject/fkzhiftx.html