如何学习微信小程序？ 学习微信小程序所需基础

时间  2020-07-05 标签 如何 学习 微信 程序 所需 基础

说明：笔者从新规划了博客方向，想更详细的讲解微信小程序的全部技术内容，本文于2020年5月24日已作修改。javascript

同时笔者也欢迎一块儿合做双赢，愿意写杂志，写书，贡献本身的一份微薄之力！css

本文原创首发CSDN，连接 https://blog.csdn.net/qq_41464123/article/details/105198163 ，做者博客https://blog.csdn.net/qq_41464123 ，转载请带上本段内容，尤为是脚本之家、码神岛等平台，谢谢配合。html

做为第二篇的讲解，本文主要讲解 前端

  1. 微信小程序好在哪里？
  2. 学习微信小程序，须要什么基础？
  3. 如何学习微信小程序？
  4. 微信小程序的基本架构。

 

前言

微信小程序做为近几年“微服务”的杰出表明，应用十分普遍。小程序是一种新的开放能力，开发者能够快速地开发一个小程序。小程序能够在微信内被便捷地获取和传播，同时具备出色的使用体验。vue

说的通俗一些，微信小程序就是微信中很是小巧的程序（这不废话......），咱们打开本身手机中的微信，向下一拉，就能够看到小程序列表了。好比“腾讯QQ”这个小程序，咱们能够利用它，接收QQ的消息；再入“跳一跳”，“每天象棋”这些小游戏，咱们能够利用学习工做之余的短暂空闲时间玩上一把小游戏......那么，为何微信小程序可以有如此大的发展呢？如今就来谈谈个人见解。java

笔者曾经在运维微信公众号的时候，发现了小程序的存在，后来就申请了一个，尝试着开发出了第一个属于本身的小程序。从无到有，再到如今的实战开发，虽然敲的代码都是套模板，思路也很暴力，但平时仍是会积累不少小程序相关的实践经验和作一些基于微信小程序的开源项目，因此说总结微信小程序的项目经验，我以为是我最好的成长，也但愿给今年想接触微信小程序或者想从事微信小程序工做的朋友带来一些经验和思考。c++

 

一：小程序优点有哪些？

 

1.几乎不占用手机内存数据库

若是你的电脑是低配的话，那么你就必需要合理取舍安装的软件。笔者曾经拿学校机房的电脑作过简单实验，我给电脑安装若干杀毒软件，而后同时开始体检、木马扫描操做。实验结论：只需两个杀毒软件同时体检、杀毒操做就会致使死机，2分钟内鼠标键盘无响应且电脑没法正常工做；四个杀毒软件同时体检，电脑大几率蓝屏。编程

电脑为何会死机，会蓝屏？就是由于电脑资源耗尽。同理，你若是给本身的手机装上几十个APP，效果可想而知。微信小程序几乎不占用系统内存，能给用户，尤为是低配手机用户一个良好的体验。json

 

2.无需安装，用完即走

最近由于新型冠状病毒，全国大多数学生都在参与网上教学，这个时候会涉及到不少APP。固然经常使用的APP，安装在手机，彻底没问题，可是那些不经常使用的、不太须要的如何是好？好比在大学，充饭卡一个APP，冲热水卡一个APP，跑步一个APP，看新闻作题也是一个APP，要请个假也是一个APP，可能仍是学校强制要求安装的，你们是否吐槽过这种行为？

而微信小程序是创建在微信这个大平台的应用，使用时被打开，使用完毕就消失，并且随时均可被使用，作到了“用时打开，用完即走”。固然小程序还有其余优势，这里再也不一一叙述。

 

继续阅读，你将会了解到这些

  • 微信小程序须要的基础

  • 微信小程序优点以及设计思想

  • 如何学习微信小程序

  • 微信小程序开发流程

 

二：学习微信小程序，须要什么基础？

阅读本文以前，建议你们最好要有如下基础知识，会写小程序的代码不必定能很好的实现业务需求和功能，要想实现不一样项目需求下不一样复杂度的逻辑，必定要对如下基础有充足的了解。因此在此但愿你们先熟悉一下相关基础知识，好好研究一下。

  • HTML：至少经常使用的标签要学会使用，好比<button>按钮标签，<text>文本标签，要知道一些标签是干什么用的。
  • CSS：了解类选择器、标签选择器定义和用法；了解经常使用的属性，好比height高度,width宽度，font-size字体大小等。
  • 熟练一种编程语言：java/js/c++皆可，这里主要是要熟练变量定义、if条件判断、字符数组。
  • 其余：相对/绝对路径，了解JSON格式，生命周期函数

 

三：如何学习小程序？

 

我我的认为，学习最快的方式就是实践，根据官方文档，多写几个demo是就是学习微信小程序最好的方式。

  • 学习前端基础，包括但不限于HTML + CSS + JS + JQ。
  • 学习小程序基础语法，了解小程序基本结构（JS、JSON、WXML、WXSS）。
  • 实战，写项目。

初学者须要注意几点：

  • 小程序不像vue那样，修改代码按下保存后，网页上会马上见效。每一次修改代码后，如需看效果，必须从新编译或者按Ctrl + S 保存，而后等待模拟器从新加载主页，才可查看修改后的效果。
  • 要善于调用模板或者接口，切忌大片自行编程。若是须要实现某个功能，先查询一下官网文档，是否有相应的模板或库。
  • 若是是须要对接数据库的项目，必须在开发前购买服务器，实名认证且备案，小程序开发时间通常少于服务器审核时间（对于小项目来说），小程序请求的地址必须是已备案的域名。
  • 不要使用传统编程思想来看待小程序开发，小程序不像Java那样能够随心应手的写，其部分功能未必可以实现。

 

四：小程序项目的基本文件类型

 

首先是开发工具！

磨刀不误砍材工，要想高效率的开发，必需要熟练使用开发工具（IDE）。下面咱们先来了解一下微信小程序的专属开发工具。

官网下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

第一块区域是模拟器区域，是咱们代码效果的直接显示，按下CTRL + S 或者编译键，模拟器区域会刷新显示咱们的界面。

第二块区域是项目结构页面，一个小程序主体部分由三个文件组成，必须放在项目的根目录，分别是：JS（小程序逻辑）、JSON（小程序公共配置）、WXSS（小程序公共样式表）。每一个分页面分为JS（页面逻辑）、JSON（页面配置）、WXML（页面结构）、WXSS（页面样式表）四个模块，且描述页面的四个文件必须具备相同的路径与文件名。

第三块区域就是咱们编写代码的区域，占用了大部分的屏幕。

第四块区域是调试区域，小程序能够经过console.log()向控制台输出临时的信息，就至关于C++的cout<<"hello zwz"<<endl; 也至关于Java的syso。这时候这些临时信息会在这个区域显示，方便咱们调试程序。

第五块区域就是经常使用的功能模块，这里点击编辑，代码区会自动保存，模拟器会从新加载界面；点击上传代码，会发送到微信公众平台上，而后用于发布小程序。

其中第二块区域的项目结构，咱们重点介绍

第一块：JSON

上面提到：每一个分页面分为JS（页面逻辑）、JSON（页面配置）、WXML（页面结构）、WXSS（页面样式表）四个模块，那么这些页面分别都有什么用途呢？

JSON是页面配置文件，能够对本页面的窗口表现进行配置，文件内容为一个 JSON 对象，会涉及到不少的属性。

好比navigationBarTitleText 就是显示在小程序最上方的标题名称。

页面中配置项在当前页面会覆盖总的app.json的中相同的配置项。

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "标题zwz",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

第二块：WXML

 

WXML其实就是HTML，是框架设计的一套标签语言，结合基础组件、事件系统，能够构建出页面的结构。

好比最经常使用的双向数据绑定：

index.wxml

<view class="container">
  {{msg}}
</view>

index.js

Page({
  data: {
    msg:'hello zwz',
  },
  onLoad: function () {
   
  }
})

这样，咱们虽然在WXML界面没有直接写文字，但{{msg}}就直接读取到了JS文件的变量值。

这时，咱们按下CTRL + S（保存，从新编译），咱们会发现前台会渲染出  hello zwz。

这就是传说中的双向数据绑定，你把JS后台的 hello zwz  改为 hi zwz，那么前台也会显示 hi zwz，以此类推。

 

同理，若是是数组：

在JS页面的Page的data下，加上array变量，做为普通数组

array:[1,2,3,4,5,6,7,8,9],

接着将WXML界面的msg替换成array，界面则会显示以下：

本文原创首发CSDN，连接 https://blog.csdn.net/qq_41464123/article/details/105198163 ，做者博客https://blog.csdn.net/qq_41464123 ，转载请带上本段内容，尤为是脚本之家、码神岛等平台，谢谢配合。 

第三块：WXSS

WXSS和CSS同样，是一套样式语言，用于描述 WXML 的组件样式，WXSS 用来决定 WXML 的组件应该怎么显示。WXSS在实际开发过程当中，拥有绝大部分CSS的内容。

那么相比CSS而言，WXSS中独有的rpx单位可能会用获得，这个尺度单位能够根据屏幕宽度进行自适应。

具体格式以下所示，下面是用了类选择器对WXML中的元素进行样式美化。

.title{
  font-size: 30px;
  color: royalblue;
}
.input-placeholder{
  font-size: 16px;
}
.section{
  width: 100%;
  height: 55px;
  box-sizing: border-box;
  padding-top: 15px;
  font-size: 16px;
  display: flex;
}

第四块：JS

这一块毫无疑问，就是用来存放后端逻辑代码的，咱们须要掌握几个经常使用的生命周期函数，onShow、onLoad。

Page({
  data: {
    msg: "hello zwz"
  },
  onLoad: function(options) {
    // 页面建立时执行
  },
  onShow: function() {
    // 页面出如今前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  },
})

而后就是自定义方法，注意是和onLoad()平级。

好比，咱们在WXML内定义一个按钮

<button bindtap="run">按钮1</button>

接着，在JS页面编写响应事件

Page({
  data: {
    msg: "hello zwz"
  },
  onLoad: function(options) {
    // 页面建立时执行
  },
  run: function() {
    // do some things
  },
})

那么，咱们在点击这个按钮以后，就会触发run()这个方法。

 

五：总结

总而言之，本文讲解了微信小程序项目的基本架构，以及如何学习微信小程序，以及学习微信小程序所须要的基础，还有前台渲染的基本代码。

笔者会出一个微信小程序的专栏，详细讲解微信小程序的经常使用技术，谢谢朋友们的关注！

联系我们 沪ICP备13005482号-10