学习小程序需要掌握些什么

最新推荐文章于 2024-04-13 20:41:51 发布

樊小勇

最新推荐文章于 2024-04-13 20:41:51 发布

阅读量550

点赞数 4

分类专栏：前端基础总结

本文链接：https://blog.csdn.net/weixin_42396884/article/details/89408097

版权

前端基础总结专栏收录该内容

36 篇文章 0 订阅

订阅专栏

一、前言

小程序目前已经遍布我们的生活
我们每天几乎都或多或少的会用到小程序，最常见的便是乘车二维码了
因此学习下小程序

二、准备工作

开发小程序首先得注册
https://mp.weixin.qq.com/
根据下面文档提示弄好自己的私人小空间，保管好自己的信息
https://developers.weixin.qq.com/miniprogram/introduction/index.html?t=19041222
下载微信开发者工具
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

三、创建项目

点开微信开发者工具，选择小程序点击加号
填写一些项目名称位置信息

画圈的需要注意，大多数是默认的，路径需要先创一个空文件夹然后再选择
下面来介绍一下页面的组成以及小技巧

四、界面介绍

1.那么下面简单介绍一下编辑界面的组成部分

模拟器--可以直接看到我们编码的效果
编译器--编码的地方
调试器--对应浏览器的控制台
云开发--代码存在云空间(网上)
小程序模式--一般默认选择小程序模式(还有插件模式在使用插件的时候选择)
普通编辑--这里是默认显示路由，当我们在对单个页面编辑的时候可以添加一个编译模式，对应页面路径，这样编辑后显示的就是当前我们编译的页面
编译--当我们编码一部分后想看效果点击编译就可以了
左下角小圈圈里，是当前浏览页面的对应路径，点击就可以直接打开这个文件，我们浏览时发现有需要更改的页面时点击就可以直接打开不需要去找了

####2.接下来介绍一下文件组成
我们新建项目会默认生成几个文件
#####- pages–视图文件，我们所有的页面文件都放里面，小程序的页面是以文件夹来分的
pages层次
这里面每个文件夹对应着一个页面：index对应的就是首页
每个文件里的组成是
组件文件内部层次
视图组件内是四个文件，js–就是之前的js、json–组件配置文件格式是json的、wxml–对应是html、wxss–对应是css

这里重点介绍一下js内部：(wxml和wxss只有少部分变化)

// pages/zanshi/zanshi.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
      // 放数据的地方
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      // 当页面创建第一个执行的，一开始就得执行的放这里
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

这里唯一有点麻烦的便是，方法函数都是和这些初始化方法函数一样写，会比较不好找(小程序里这些组件里的文件之间是已经有连接关系的所以不需要和原生那样)

utils文件夹

这个里面是用来放我们封装的方法的
utils

app.js、app.json、app.wxss、package-lock.json简单介绍

app.js 全局js文件

//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
  }
})

子组件访问需要 const app = getApp(); 然后就可以直接使用全局函数或获取全局数据

app.json 全局的配置文件，路由声明，导航栏声明等都在这里设置

{  
  "pages": [
    "pages/index/index",
    "pages/test/test",
    "pages/cart/cart",
    "pages/my/my",
    "pages/yong/yong",
    "pages/youzan/youzan",
    "pages/map/map",
    "pages/canvas/canvas",
    "pages/get/get",
    "pages/zanshi/zanshi"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "我的小程序",
    "navigationBarTextStyle": "black"
  },
  "tabBar":{
    "borderStyle":"black",      
    "selectedColor":"#r9r9r9",  
    "list":[
      {
        "pagePath":"pages/index/index",   
        "text":"首页",                     
        "iconPath":"./img/home.png",      
        "selectedIconPath":"./img/homing.png"   
      },
      {
        "pagePath": "pages/test/test",
        "text": "测试",
        "iconPath": "./img/home.png",
        "selectedIconPath": "./img/homing.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "./img/cart.png",
        "selectedIconPath": "./img/carting.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "./img/me.png",
        "selectedIconPath": "./img/meing.png"
      }
    ]
  },
  "usingComponents": {
    "van-button": "dist/button/index",
    "van-row": "dist/row/index",
    "van-col": "dist/col/index",
    "van-popup": "dist/popup/index",
    "footer":"components/footer/Footer"
  },
  "sitemapLocation": "sitemap.json"
}

pages里的文件都需要在这里添加路径才能显示
tabBar底部导航栏，list为里面的每一项，对应都需提供组件路径
usingComponents使用组件
sitemapLocation对应的绑定微信生成的那个sitemap.json
小技巧：我们需要新增视图组件可以直接在pages后创建一条路径更改名字，编译后会自动生成对应的组件