微信小程序学习笔记(阶段一)

时间:2022-03-20 17:49:46

一阶段学习过程:

  (一)看官方文档的简易教程:https://mp.weixin.qq.com/debug/wxadoc/dev/

  (二)看小码哥视频:https://chuanke.baidu.com/v2040981-197486-1133724.html

  (三)模仿并写出一个计算器小程序demo

项目结构:

  pages:存储这各个页面的文件夹

  pages内的文件夹(初始有index、logs):分别存储这每个页面,其中一般包含三种文件,*.js、*wxml、*wxss

  utils:里面装有一个util.js文件,该文件封装着各种工具方法

  app.js:整个小程序周期的相关逻辑

  app.json:用于注册页面,定义一些全局信息或整个程序相关信息等公共信息

  app.wxss:全局公共样式表

文件类型介绍:

  *.js:定义各种逻辑处理的文件

  *.wxml:定义页面组件的文件,相似于html(这里是基于html5,名字wx是微信的意思,ml则是html的后两个字母)

  *.wxss:定义组件样式的样式表,相似于css

  *.json:用于配置相关信息的文件

添加页面:

  ①在pages添加一个页面文件夹

  ②在新增的文件夹内添加.wxml文件及.js文件(.wxss和.json可选)

  ③在.js中添加page项(输入pa后自动联想,然后选择Page会自动创建好)

  ④在app.json中的“pages”项中注册页面

定义/修改/使用页面变量:

  定义:

    在本页面的*.js文件中的data项中定义,格式如:

  data: {
text: "this is Macrazd",
res: "0",
lastIsOperator:false,
arr:[],
logs:[]
},

  使用:

    在本页面的*.wxml中使用,格式如:

  <block wx:for="{{logs}}" wx:for-item="log">
<view class="item">
<view class="text">{{log}}</view>
</view>
</block>

  注:这里的<block wx:for="{{logs}}" wx:for-item="log">标签的意思是以logs这一数组作循环生成<view class="item"><view class="text">{{log}}</view></view>

  读取/修改:

    在本页面的*.js中任一方法中修改data中的变量值,格式如:

//读取:
console.log(this.data.text);
//修改
this.setData({data:"123"});

  注:这里的console.log(var);的作用是在控制台输出内容

定义和调用方法:

  在*.js中定义一个方法的格式如下:

test: function(){
console.log(this.data.text);
}
/*
函数名:function(){
方法体
}
*/

  在*.wxml中调用*.js中的逻辑方法的格式如下:

<view bindtap="btnClick">back</view>

个人感想:

  在学习前在知乎上看到有人说,只要粗略会一些html、css、js就可以很快上手微信小程序。在我下载了官方开发工具之后,看到文件结构还是挺简洁的,但是看到这两种文件的格式*.wxml、*.wxss,一下就懵了,*.json也不知道是用来干什么的(本人刚入门,没学过json)。之后我就开始看官方文档,粗略看完了简易教程之后,有了简单的了解,但还是没什么概念,于是就去看了小码哥的视频,才发现wxml是html5的改版,wx是指微信,ml就是html的后面两个字母,wxss和css同理,这瞬间就开窍了。之后在学习过程中,虽然有些和之前所学的网页设计的内容有一些区别,但还是比较快就能上手的。

  所以总的来说,只要了解过网页设计,再稍微理解一下文件的框架结构,基本上入手来说是问题不大的(至少对我来说是这样的)。