【微信小程序】随手笔记

标题微信小程序开发笔记

一，引言

小程序就是一个前端，语法和前端差不多
即使是是小白，看着开发文档也可以做出来一个小程序

二，写小程序一定要看官方文档

微信小程序官方文档

三，文件目录

每个页面都会有以下四种文件
.js：对应的是js文件，主要存放一些数据和动作渲染
.json：对应的是一些配置文件，存放的都是一些页面配置
.wxml：对应的是html文件，存放的是一些组件
.wxss：对应的是css文件，主要是一些渲染

四，全局配置文件

这四个文件控制的是全局性配置
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
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

app.json

"pages" 中存放的是所有页面路径
"window" 中设置的是整体页面布局
"tabBar" 是下面三个栏目
"style" 是版本号
"sitemapLocation" 存放的是sitemap配置文件路径

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/news/news",
    "pages/mine/mine",
    "pages/detail/detail",
    "template/list/list"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Junnix_Test",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#333",
    "selectedColor": "#ff0000",
    "backgroundColor": "#f5f5f5",
    "borderStyle": "black",
    "position": "bottom",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "icon/home.jpg",
        "selectedIconPath": "icon/_home.jpg"
      },
      {
        "pagePath": "pages/news/news",
        "text": "新闻",
        "iconPath": "icon/news.jpg",
        "selectedIconPath": "icon/_news.jpg"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "icon/my.jpg",
        "selectedIconPath": "icon/_my.jpg"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

sitemap.json：

{
  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
  "rules": [{
  "action": "allow",
  "page": "*"
  }]
}

app.wxss

@import是导入外部wxss文件
.container 是对container类的一些文字渲染
view 是所有view组件的文字渲染

/**app.wxss**/
@import "common/common.wxss"

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

view{
  color: #333;
}

五，公共配置

如果多个页面需要引用
一个图片
或者多个页面需要某个文字渲染
或者多个页面需要引用一个组件
那么我们就可以做一些全局性配置

1. 公共配置文件

common文件夹
下面存放需要的配置即可
如：我这里存放了一个公共文字渲染文件

common.wxss

view{
  color: red;
}

在其他页面的.wxss文件中引入即可使用
app.wxss

@import "common/common.wxss"

2. 公共照片文件

icon文件夹
下面存放了一些照片

3. 页面模板

template文件夹
这里和正常页面设置一样
如，模板页面名字交list
那么这里就需要四个页面文件

list.js

// template/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

list.json

{
  "usingComponents": {}
}

list.wxml

{{img}} {{info}}两个括号包起来的数据表示占位符，需要数据绑定

<!--template/list/list.wxml-->
<!-- 定义模板 -->
<template name="list">
  <view class="list">
    <view class="left">{{img}}</view>
    <view class="right">{{info}}</view>
  </view>
</template>

list.wxss

.list：是对list类的渲染
.list .left：是对list类下left类的渲染
.list .right：是对list类下right类的渲染

/* template/list/list.wxss */
.list{
  display: flex;
  margin: 30rpx 0;
}
.list .left{
  width: 200rpx;
  height: 200rpx;
  background-color: skyblue;
}
.list .right{
  flex: 1;
  background-color: yellowgreen;
}

六，页面配置

七，组件概述

八，框架概述

九，使用HBuilder X开发小程序