0基础学习微信小程序(转载)

原文地址:https://blog.csdn.net/qq_41464123/article/details/105198163

前言

微信小程序作为近几年“微服务”的杰出代表,应用十分广泛。小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。

 

你将会了解到哪些?

  • 微信小程序需要的基础

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

  • 如何学习微信小程序

  • 微信小程序开发流程

  • 微信小程序开发模板代码

 

需要什么基础?

阅读本文之前,建议大家最好要有以下基础知识,会写小程序的代码不一定能很好的实现业务需求和功能,要想实现不同项目需求下不同复杂度的逻辑,一定要对以下基础有充足的了解。所以在此希望大家先熟悉一下相关基础知识,好好研究一下。

  • HTML:至少常用的标签要学会使用,比如<button>按钮标签,<text>文本标签,要知道一些标签是干什么用的。

  • CSS:了解类选择器、标签选择器定义和用法;了解常用的属性,比如height高度,width宽度,font-size字体大小等。

  • 熟练一种编程语言:java/js/c++皆可,这里主要是要熟练变量定义、if条件判断、字符数组。

  • 其他:相对/绝对路径,了解JSON格式,生命周期函数

 

小程序优势有哪些?

 

1.几乎不占用手机内存

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

电脑为什么会死机,会蓝屏?就是因为电脑资源耗尽。同理,你如果给自己的手机装上几十个APP,效果可想而知。微信小程序几乎不占用系统内存,能给用户,尤其是低配手机用户一个良好的体验

 

2.无需安装,用完即走

最近因为新型冠状病毒,全国大多数学生都在参与网上教学,这个时候会涉及到很多APP。当然常用的APP,安装在手机,完全没问题,但是那些不常用的、不太需要的如何是好?比如在大学,充饭卡一个APP,冲热水卡一个APP,跑步一个APP,看新闻做题也是一个APP,要请个假也是一个APP,可能还是学校强制要求安装的,大家是否吐槽过这种行为?

而微信小程序是建立在微信这个大平台的应用,使用时被打开,使用完毕就消失,而且随时都可被使用,做到了“用时打开,用完即走”。当然小程序还有其他优点,这里不再一一叙述。

 

如何学习小程序?

 

我个人认为,学习最快的方式就是实践,根据官方文档,多写几个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,界面则会显示如下:

 

第三块: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()这个方法。

除了自定义事件以外,还有很多我们平时经常需要的功能。接下来我就来讲解一下这些常用的功能

 

模板功能一:页面跳转传值(wx.navigateTo)

跳转模板代码:

wx.navigateTo({
   url: '../../pages/page01/page01?id=' + this.data.id
})

其中 ../../pages/page01/page01 是需要跳转的路径,参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔;如 '../../pages/page01/page01?id=1&name=zwz'另外还有跳传成功的回调函数,个人感觉不常用到。

 

模板功能二:返回上一级页面(wx.navigateBack)

上面的wx.navigateTo是跳转到新的页面,如果是要返回原来的界面,我们就要使用wx.navigateBack方法,delta参数是返回几层页面。这个方法不能传递参数,我们可以在返回之前改变app.js中的全局变量,然后在返回到的界面的onShow()方法读取app.js中的数据,来实现页面传值。

wx.navigateBack({
    delta: 1,
})

模板功能三:本页面变量赋值(this.setData)

比如说,我们在当前页面存在一个变量msg,我们在某个方法获取到了一个数值,想要赋值给这个msg,就需要用到this.setData()方法.

Page({
  data: {
    msg:'',
  },
  onLoad: function (options) {
    this.setData({
      msg: options.msg
    })
  },
})

options中包含其他页面传来的参数,我们可以按照这样的模式来获取其他页面的数据。

 

模板功能四:发起请求

模板如下:

本机服务器使用Tomcat即可。

var that = this;
wx.request({
  url: 'http://localhost:8080/test/hello',
  method: 'GET',
  data: {
    id: that.data.msg
  },
  header: {
    'content-type': 'application/json'
  },
  success(res) {
    that.setData({
      str: res.data,
    })
    console.log("页面获取到res = " + that.data.str)
  }
})

微信小程序在前后端分离上做的很出色,前端只管界面,业务逻辑全部到后端来实现。后端只需要给我提供一个接口,我在小程序前端,访问这个接口,能获取数据就可以了。

一般来说,我们从后端获取的数据都是JSON格式的,就像这样:

peoples:[
  { "name": "zwz01", "age": "18", "height": "188" },
  { "name": "zwz02", "age": "19", "height": "189" },
  { "name": "zwz03", "age": "20", "height": "190" },
],

他的特点就是外面是[]中括号,里面是{}大括号,属性名:属性值。

我们要读出他的每一个值,就必须要用到item,前面说过item就是数组的每一个元素 a[i],用法如下:

接着获取到这些JSON数据,赋值给小程序JS页面的people这个数组,在WXML文件中就可以这样调用显示

<view class="container">
 
  <view wx:for="{{peoples}}" wx:key="index" wx:for-item="item">{{index+1}}个人的名字为{{item.name}},年龄为{{item.age}},身高为{{item.height}}</view>
 
</view>

然后模拟器显示结果如下:

模板功能五:条件判断

在实战中还会经常使用到if条件判断,就上方的JSON例子,如果只要你显示年轻>=19的数据,如何实现?

这时,我们要用到微信小程序专属的IF语句——wx:if=""

<view class="container">
 
  <view wx:for="{{peoples}}" wx:key="index" wx:for-item="item">
      <text wx:if="{{item.age >'18'}}">{{index+1}}个人的名字为{{item.name}},年龄为{{item.age}},身高为{{item.height}}</text>
  </view>
 
</view>

结果如下:

 

模板功能六:alert弹框(wx.showToast)

有些时候,我们需要给用户一个提示反馈,常常用于触发某个自定义事件,显示效果和模板代码如下:

wx.showToast({
  title: '请您先登入!',
  duration: 2000
})

模板功能七:有选项的弹框

wx.showModal({
	title: '是否继续修改房间信息?',
	content: '修改房间信息成功,如想再次修改,请点击确定;如需要返回主界面,请点击取消',
	success: function (res) {
	  if (res.confirm) {
		  // 用户点击确定
	  } 
	  else if (res.cancel) {
		  // 用户点击取消
	  }
	}
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值