HibisciDai 主页关于我归档标签分类相册
微信小程序1-快速入门
|微信小程序
字数总计: 2.1k|阅读时长: 7 分钟

微信小程序1-快速入门

微信小程序1-快速入门

微信小程序简介与发展

微信小程序的介绍

简称CX，触手可及，用完即走。

微信小程序的发展史

如今的微信小程序

微信小程序账号注册和APPID申请

微信小程序申请账号

登录微信公众平台注册小程序

微信小程序的appid

微信身份证

微信小游戏

什么是微信小游戏

H5游戏 微信小游戏
采用JAVA-DOM或canvas绘制 强制采用canvas绘制开发
强调javascript的运用，面向过程的逻辑开发 强调面向对象，精灵基类，资源的加载

微信生态圈、用户习惯、即时消费、从团队参与感到开发的精细化

快速开发微信小游戏

微信web开发者工具的安装和项目创建

开发工具的安装

在开发->开发工具->开发者工具

下载双击安装即可

第一个项目创建

微信小程序开发框架介绍与Demo代码认识

微信小程序开发框架

  • pages为页面

一个微信小程序界面由多个文件组成
js页面逻辑
wxml页面结构
json页面配置
wxss页面样式表

  • utils为全局共享文件

  • app.js为小程序逻辑

  • app.json为小程序公共配置

  • app.wxss为小程序公共样式表

  • project.config.json为个人设置

  • 允许上传的文件
    在项目目录中，以下文件会经过编译，因此上传之后无法直接访问到：.js、app.json、.wxml、*.wxss（其中 wxml 和 wxss 文件仅针对在 app.json 中配置了的页面）。除此之外，只有后缀名在白名单内的文件可以被上传，不在白名单列表内文件在开发工具能被访问到，但无法被上传。具体白名单列表如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
wxs
png
jpg
jpeg
gif
svg
json
cer
mp3
aac
m4a
mp4
wav
ogg
silk

微信小程序Demo

wechat-miniprogram/miniprogram-demo

微信小程序配置文件appjson代码编写

配置文件代码编写

App.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light", //下拉以后loading的样式
    "navigationBarBackgroundColor": "#fff",	//修改头部颜色
    "navigationBarTitleText": "Weixin",	//修改头部文本
    "navigationBarTextStyle":"black", //修改头部字体颜色
    "enablePullDownRefresh": true, //是否可以下拉刷新
    "backgroundColor": "#ddd" //背景色
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

json是一种数据传输格式

  • 数据传输过程
    1.字符串。（复杂数据类型；数组和对象）
    2.xml。受带宽影响。
    3.json。{}对象[]数组，对象内部都是键值对。

底部触摸栏代码编写

  • 添加底部触摸按钮

app.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",	//页面路径
        "text": "首页",	//页面名称
        "iconPath": "images/icon_1.png",	//默认图标路径
        "selectedIconPath": "images/icon_11.png"	//被选中图标路径
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "images/icon_2.png",
        "selectedIconPath": "images/icon_22.png"
      }
    ]
  },

miniprogram-demo-master\miniprogram\image中有图标，复制到helloworld相同路径中hello world\images

tabBar最少2个最多5个。

  • 修改触摸按钮文字颜色

app.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
"tabBar": {
  "selectedColor": "#1AAD19", //tabbar被选中字体颜色
  "borderStyle": "black", //分隔栏颜色
  "list": [
    {
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "images/icon_1.png",
      "selectedIconPath": "images/icon_11.png"
    },
    {
      "pagePath": "pages/logs/logs",
      "text": "日志",
      "iconPath": "images/icon_2.png",
      "selectedIconPath": "images/icon_22.png"
    }
  ]
},

  • 超时时间

默认时间60s

app.json

1
2
3
4
5
6
"networkTimeout": {
  "request": 20000, //单位ms
  "connectSocket": 20000,
  "uploadFile": 20000,
  "downloadFile": 20000
},

  • debug

打开调试模式

app.json

1
"debug": true,

新页面的创建和页面代码的组成结构

新页面的创建

  • 新页面创建的3种方式

1.从app.json文件开始创建
写好之后直接自动创建对应页面文件。
2.单个文件逐一创建
右键pages新建目录结构，自动创建四个基础文件，json文件自动添加文件。
3.删除文件后的编译自动创建
右键删除某一个页面文件夹后，需要json中手动删除该页面。

  • 新页面创建的层次关系

1.所有页面都在pages文件中，也可以自行定位于自定义的其他文件，比如page
2.在一个文件夹中创建一个页面（创建简单，代码清晰）
3.在一个文件夹中创建多个文件（层次清晰）

组成页面的不同文件结构

  • WXMK->HTML
  • WXSS->CSS
  • JS->Javascript
  • JSON->Javascript（json对象）
  • App->applicaiton

不能直接使用HTML文件
可以全部使用CSS文件
Js脚本文件没有Window对象

微信小程序生命周期与调试步骤

小程序页面生命周期

onLoad -> 生命周期函数 - 监听页面加载
onReady -> 生命周期函数 - 监听页面初次渲染
onShow -> 生命周期函数 - 监听页面显示
onHide -> 生命周期函数 - 监听页面隐藏
onUnload -> 生命周期函数 - 监听页面卸载
onPullDownRefresh -> 页面监听相关处理函数 - 监听用户下拉动作
onReachBottom -> 页面上拉触底事件的处理函数
onShareAppMessage -> 用户点击右上角分享

页面创建初始化会在js文件中写入这些函数

onLoad初始化加载：第一次完整打开小程序页面
onShow页面加载：每次从未激活状态变成激活状态的操作

news.js初始化代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
// pages/news/news.js
Page({

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

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //第一次完整打开小程序
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    //全部加载和显示完成，可以提供给用户进行操作的状态
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    //每次从未激活状态变为激活状态的执行
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    //每次从激活状态变成未激活状态的执行
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    //正常关闭时的执行状态
  },

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

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

  },

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

  }
})

小程序调试步骤

  • 逻辑代码调试方法
    控制台显示方式 console.log() console.info()
    弹出框（API框架介绍）
1
2
3
4
5
wx.showModal({
	title: 'test',
	content: 'onShow',
	cancelColor: 'cancelColor',
})
  • 模拟，真机调试模式
    点击编译，预览，真机调试

news.js测试调试代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
// pages/news/news.js
Page({

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

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //第一次完整打开小程序
    console.log("onLoad")
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    //全部加载和显示完成，可以提供给用户进行操作的状态
    console.log("onReady")
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    //每次从未激活状态变为激活状态的执行
    console.log("onShow")
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    //每次从激活状态变成未激活状态的执行
    console.log("onHide")
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    //正常关闭时的执行状态
    console.log("onUnload")
  },

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

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log("onReachBottom")
  },

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

微信小程序的上线审核和发布

小程序发布步骤

1.上传到微信公众平台就可（必须有appid可以进行上传）
2.打开微信公众平台，点击”提交审核”
3.三种状态
开发版本
审核版本
线上版本
对应三种权限

小程序的审核机制

1.开发版本交审核时不能有大量错误
2.总代码不超过2M

文章作者: HibisciDai
文章链接: http://hibiscidai.com/2021/02/23/微信小程序1-快速入门/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 HibisciDai！
学习笔记微信小程序
好用、实惠、稳定的梯子,点击这里