微信小程序入门

大明湖畔王先森
VIP.5 如鱼得水
526 阅读5分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

准备

下载微信开发者工具

稳定版 Stable Build | 微信开放文档 (qq.com)

创建新项目

  • 项目名称：整个项目的名字。
  • 目录：项目存在的位置。
  • AppID：首次创建新项目，其中AppID可以使用测试号，在后续开发过程中，AppID随时都可以更改。
  • 开发模式：选择小程序就行。
  • 后端服务：不使用云开发。（小程序·云开发是微信团队联合腾讯云推出的专业的小程序开发服务。开发者可以使用云开发快速开发小程序、小游戏、公众号网页等，并且原生打通微信开放能力。开发者无需搭建服务器，可免鉴权直接使用平台提供的 API 进行业务开发。）
  • 语言：选择JavaScript就好。

文件类型

项目结构

└─ empty-folder/ ·································· 项目所在目录
   ├─ pages/ ······································ 页面目录
   │  ├─ index/ ··································· index页面
   │  │  ├─ index.js ······························ index页面逻辑
   │  │  ├─ index.wxml ···························· index页面结构
   │  │  └─ index.wxss ···························· index页面样式
   │  └─ logs/ ···································· logs页面
   │     ├─ logs.js ······························· logs页面逻辑
   │     ├─ logs.wxml ····························· logs页面结构
   │     └─ logs.wxss ····························· logs页面样式
   ├─ utils/ ······································ 公共脚本目录
   │  └─ util.js ·································· 工具脚本
   ├─ app.js ······································ 应用程序逻辑
   ├─ app.json ···································· 应用程序配置
   └─ app.wxss ···································· 应用程序公共样式
  • 新建页面时，在pages中建立

基本文件

  • wxml：微信模板文件，类似网页开发的html文件。WXML 语法参考。
  • wxss：微信样式表文件，用于定于页面样式。WXS 语法参考。
  • js：脚本文件，代码逻辑写在这，语法规则和Vue十分相似。
  • json：静态数据配置文件。

全局配置文件

app.json

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",  //背景文本样式 可选light dark
    "navigationBarBackgroundColor": "#fff",  //导航背景色，可定义任意颜色
    "navigationBarTitleText": "Weixin",  //导航标题，可定义任意文本
    "navigationBarTextStyle":"black"  //导航文本颜色，可选black white
  },
}

  • pages：用来存放页面数组，小程序中的所有页面都会存在pages中。

  • window：：定于所有页面的顶部背景颜色，文字颜色，标题等，这是一个全局的配置，修改了所有页面都会生效。当然，我们可以在单个页面json配置中定义独特的风格用于覆盖全局配置，比如让每个页面的头部颜色都不一样。

全局样式.png

微信授权登录

小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识，快速建立小程序内的用户体系。

登录流程

微信授权登录流程.webp

授权登录

  • 小程序通过**wx.login获取code**（用户登录凭证，有效期为5分钟，使用后立即失效，可多次获取）

  • 开发者需要在开发者服务器后台调用 code2Session，使用 code 换取 openid、unionid、session_key 等信息

    • session_key：会话密钥 session_key 是对用户数据进行 加密签名 的密钥。为了应用自身的数据安全，开发者服务器不应该把会话密钥下发到小程序，也不应该对外提供这个密钥。
    • unionid：微信开放平台帐号下的唯一标识。
    • openid：当前小程序的唯一标识。
wx.login({
  success (res) {
    if (res.code) {
      //发起网络请求
      wx.request({
        url: 'https://example.com/onLogin',		//自己的服务器
        data: {
          code: res.code	//发送code
        }
      })
    } else {
      console.log('登录失败！' + res.errMsg)
    }
  }
})

检查登录态是否过期

检查登录态是否过期。 通过 wx.login 接口获得的用户登录态拥有一定的时效性。用户越久未使用小程序，用户登录态越有可能失效。反之如果用户一直在使用小程序，则用户登录态一直保持有效。具体时效逻辑由微信维护，对开发者透明。开发者只需要调用 wx.checkSession 接口检测当前用户登录态是否有效。

wx.checkSession({
  success () {
    //session_key 未过期，并且在本生命周期一直有效
  },
  fail () {
    // session_key 已经失效，需要重新执行登录流程
    wx.login()	 //重新登录
  }
})

获取微信用户信息

微信小程序获取用户信息的两种方法wx.getUserProfile（wx.getUserInfo） 和open-data

wx.getUserInfo

2021年4月13日后发布的小程序新版本，无法通过wx.getUserInfo与获取用户个人信息（头像、昵称、性别与地区），将直接获取匿名数据。这里就不做详细讲解了。

wx.getUserProfile

2021年4月13日后发布的小程序新版本，需要通过wx.getUserProfile获取个人信息。

代码块

<button v-if="canUseGetUserProfile" hover-class="none" @tap="getUserProfile">微信登录</button>
<button v-else hover-class="none" open-type="getUserInfo" @getuserinfo="setUserInfo">微信登录</button>

Page({
  data: {
    userInfo: {},
    hasUserInfo: false,
    canIUseGetUserProfile: false,
  },
  onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
    // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
})

成功示例

获取头像昵称-按钮.png

获取头像昵称-提示.png

获取头像昵称-成功获取.png

open-data

<!-- 获取用户头像 -->
<open-data type="userAvatarUrl"></open-data>
<!-- 获取用户昵称 -->
<open-data type="userNickName"></open-data>

获取头像昵称-成功获取.png

底部导航

示例

底部导航.png

配置app.json文件

Tabbar为小程序的导航组件

如果小程序是一个多tab应用（客户端窗口的底部或顶部有tab栏可以切换页面），可以通过tabBar配置项指定tab栏的表现，以及tab切换时显示的对应页面。

"tabBar": {
    "color": "#000000",  //文字颜色
    "selectedColor": "#169BD5",  //选中后文字颜色
  	"position": "bottom",   //tabBar位置顶部top或底部bottom
    "list": [
      {
        "pagePath": "pages/homepage/homepage",  //对应的页面
        "text": "首页",  //文字
        "iconPath": "./ico/首页.png",  //默认图标
        "selectedIconPath": "./ico/首页 (2).png"  //选中后的图标
      },
      {
        "pagePath": "pages/publish/publish",
        "text": "上传",
        "iconPath": "./ico/编写.png",
        "selectedIconPath": "./ico/编写 (2).png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的",
        "iconPath": "./ico/个人.png",
        "selectedIconPath": "./ico/个人 (2).png"
      }
    ]
  },
  • tabBar配置项添加的list属性中，tab列表最少2个，最多5个。
  • pagePath中的页面路径必须存在于pages中。
avatar
文章
阅读
粉丝