一阶段学习过程:
(一)看官方文档的简易教程: https://mp.weixin.qq.com/debug/wxadoc/dev/
(二)看小码哥视频: https://chuanke.baidu.com/v2040981-197486-1133724.html
(三)模仿并写出一个计算器小程序 demo
项目结构:
pages: 存储这各个页面的文件夹
pages 内的文件夹(初始有 indexlogs): 分别存储这每个页面, 其中一般包含三种文件,*.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>
个人感想:
在学习前在知乎上看到有人说, 只要粗略会一些 htmlcssjs 就可以很快上手微信小程序在我下载了官方开发工具之后, 看到文件结构还是挺简洁的, 但是看到这两种文件的格式 *.wxml*.wxss, 一下就懵了,*.json 也不知道是用来干什么的 (本人刚入门, 没学过 json) 之后我就开始看官方文档, 粗略看完了简易教程之后, 有了简单的了解, 但还是没什么概念, 于是就去看了小码哥的视频, 才发现 wxml 是 html5 的改版, wx 是指微信, ml 就是 html 的后面两个字母, wxss 和 css 同理, 这瞬间就开窍了之后在学习过程中, 虽然有些和之前所学的网页设计的内容有一些区别, 但还是比较快就能上手的
所以总的来说, 只要了解过网页设计, 再稍微理解一下文件的框架结构, 基本上入手来说是问题不大的(至少对我来说是这样的)
来源: https://www.cnblogs.com/macrazds/p/8635582.html