微信小程序开发基础

开发基础

文件介绍

app.json文件介绍

pages字段：⽤于描述当前⼩程序所有⻚⾯路径，这是为了让微信客⼾端知道当前你的⼩程序 ⻚⾯定义在哪个⽬录

windows字段：
定义小程序所有页面的额顶部背景颜色，文字颜色定义等

tabbar字段

page.json 页面配置

我们可以在这些文件中增加属性，从而层叠掉我们在app.json中写的全局配置，这里相当于给每个文件不同的配置

页面配置小结

配置app.json文件内的list

list负责的是小程序下方的导航栏
详细的参数见微信开放文档
跳转链接

swiper 滑块视图容器

跳转链接
演示：

常用属性
indicator-dots：是否显示面板指示点
indicator-color：指示点的颜色
indicator-active-color：当前选中的指示点的颜色
autoplay：是否自动切换
circular：是否采用协接滑动
interval：自动切换时间间隔

进度条

<!-- progress 进度条 -->
<progress percent="80"></progress>
<progress percent="40" show-info="true"></progress>
<progress percent="80" show-info="true" active="ture"></progress>
<icon type="success" size="40"></icon>
<icon type="success_no_circle"></icon>
<icon type="info"></icon>
<icon type="warn"></icon>
<icon type="waiting"></icon>

逻辑层和渲染层分离

小程序的运行环境分为两个层：渲染层和逻辑层

逻辑文件：app.js和pages.js

app.js：小程序逻辑
每个小程序都需要在app.js内调用APP方法注册小程序实例，绑定生命周期回调函数，错误监听和页面不存在的监听函数等

最开始的app.js文件

// app.js
App({
   
//生命周期回调--监听小程序初始化
  onLaunch() {
   
    // 展示本地存储能力
    const 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
  }
})

index.wxml文件

<!--index.wxml-->
<view class="container">