佳宸学习和分享笔记的地方

0%

写给学弟学妹的学习小程序经验总结

写给学弟学妹的学习小程序经验总结

此篇文章面向前端入门以及小程序新手,入门爬坑可以观看

我个人跟着教程写过一个电影小程序,然后就直接开始写比赛的小程序了,对小程序有一定认识,但理解还是比较浅的,如有错误欢迎批评指正。

学习小程序的前置知识

  • 前端使用的是微信自定义的一套规范wxml+wxss+json+js,其本质还是html+css+javascript.打好基础才能快速学好框架。

  • 编译器推荐:VS Code,有非常多的插件,代码补全,格式修正,颜色高亮,版本控制

  • 推荐网站:MDN有标准语法文档方法函数忘记了可以去这个网站查,freecodecamp编程闯关、完成挑战

  • 第一阶段:html,css,推荐书籍:Head First HTML与CSS(第2版)HTML5权威指南 CSS揭秘 CSS世界可以边看书或者视频边写代码。快速熟悉网页框架结构。

  • 第二阶段:JavaScript,http这一阶段基础一定要打牢,前端的绝大部分都是以javascript为基本的。推荐书籍:JavaScript DOM编程艺术 (第2版)JavaScript高级程序设计(第3版)JavaScript语言精粹ES6标准入门(第3版)深入理解ES6如果觉得难可以先看视频,再看书,中间跟着写一些小demo,学完后做一个完整的网页(学习所有知识都可以按照此路径,视频:快速了解 > 书籍:深入探究 > 实践:理解巩固)。

  • 扩展知识:学一点点linux和git对合作开发有更高的效率。

  • 先学会了一些框架(vue,react)可以更快地上手小程序。

小程序的学习

入门指导

1.申请账号

进入小程序注册页
可以在小程序后台,依次点击「设置」->「开发设置」获取到这个「AppID」自己保存:AppID相当于小程序平台的身份证

2.安装开发工具

前往 开发者工具下载页面

稳定版 Stable Build (1.02.1904090)

Windows 64Windows 32macOS

根据不同操作系统下载相应版本

3.创建项目

1560426511329

4.在VS Code中编写代码,在小程序开发者工具里调试

VS Code官网下载:code.visualstudio.com/

点击「扩展」,安装小程序插件推荐「minapp」「wxml」「wechat-snippet」,其他插件自行选择

1560427053684


文件构成

小程序一般由下面四类文件组成:

  • json配置文件

    小程序全局配置:「app.json

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     //配置页面路径
    "pages": [
    ​ "pages/index/index",
    ​ "pages/logs/logs"
    ],
    //配置窗体样式
    "window": {
    ​ "backgroundTextStyle": "light",
    //顶部导航样式
    ​ "navigationBarBackgroundColor": "#fff",
    ​ "navigationBarTitleText": "WeChat",
    ​ "navigationBarTextStyle": "black"
    },

    开发工具配置:「project.config.json

    开发者工具的统一配置,界面设置以及云函数相关

    单页面配置:「page.json

    对本页面的窗口表现进行配置,会覆盖app.json的window中相同的配置项

  • wxml模板文件,AS:HTML

    1.跟html很像,类比<div>=<view>,<p>=<text>,<a>=<navigator>

    2.与html不同的是,可以在标签中加判断或循环语句wx:if、else/wx:for还可以使用三元运算符等

    3.在标签里使用可以读取当前页面JS文件data:{motto:'hello World'}data对象中的数据

    4.在标签中通过bindtap/catch="functionName"冒泡/捕获绑定事件

  • wxss样式文件,AS:CSS

    1.2rpx=1px小程序根据不同屏幕大小,底层来换算像素单位

    2.flex布局:推荐阮一峰老师的博客Flex 布局教程:语法篇 Flex 布局教程:实战篇

  • js脚本逻辑文件

    1.页面生命周期**

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
// pages/life.js 页面初始化时,小程序自动给我们创立了生命周期函数
Page({
/**
* 页面的初始数据,可以使用this.setData({ msg: "Hello World" })传入data对象wxml可以从中获取数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})

很多人说this.setData()传不进数据,有人回答在函数里先申明个var that=this,这种回答很敷衍,提问人还是不会懂,治标不治本。推荐不懂的同学去了解一下this指向原理:this 永远指向最后调用它的那个对象,多看几篇技术文章this、apply、call、bindJavascript 深入浅出 this

2.发起http请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//仅为示例
wx.request({
url: 'http://test.php',
data: {
x: '',
y: ''
},
method:'GET'\'POST',
header: {
'content-type': 'application/json'
},
success (res) {
console.log(res.data)
}
})

通过请求后台接口,发送获取数据

3.用户登陆

基本每个小程序都少不了登陆流程

彻底搞懂小程序登陆流程

img


个人小结

之前喜欢计算机,但是摸不到门路,大约一年前加入工作室,因为比较喜欢写完代码就看到界面交互的效果,确立了学习方向:前端。上学期入门了html,CSS ,JavaScript期间写了几个网页,巩固了一下基础.这学期写完工作室官网,刚学完ES6就开始小程序大赛了。

我们工作室是独立非学校、非盈利的计算机学习组织主要学习互联网开发,前端后端,设计,三个方向,每周30小时学习打卡,一次学习经验分享会,让我们互相学习监督,共同成长。感谢前辈创业,学长引路,让我从单喜欢计算机到有了专业方向。

前辈传给我们,我们再教学弟学妹,这种传承的精神源自于我们有共同理想,共同爱好,并为之付出努力。我记得王小波在维也纳看三个青年在街头演奏的一席话:青年的动人之处,就在于勇气,和他们的远大前程。

希望能给学弟学妹们,前端刚入门者一些指导。