微信小程序1-快速入门

微信小程序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
好用、实惠、稳定的梯子,点击这里