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

一阶段学习过程:

  (一)看官方文档的简易教程: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同理,这瞬间就开窍了。之后在学习过程中,虽然有些和之前所学的网页设计的内容有一些区别,但还是比较快就能上手的。

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

原文地址:https://www.cnblogs.com/macrazds/p/8635582.html

时间: 2024-10-09 20:38:19

微信小程序学习笔记(阶段一)的相关文章

微信小程序学习笔记--20170425--登录验证实现

初探微信小程序已经有几天的时间,跟随极客学院某某老师(只关注技术未关注老师,还请谅解).从微信小程序的框架结构及相关内容.下面以登录验证功能模块,展示近期学习的内容. 需求描述: 对于部分页面添加登录验证,用户未登录的情况下,进入页面,页面自动转向登录页面.登录验证成功后,回调到登录发起页面. 实现思路: 创建全局变量用于存储当前登录用户对象(userInfo).全局方法用于验证登录有效性(checkLoginInfo()).全局方法用于获取当前页面的全路径(getCurrentUrl()).

微信小程序学习笔记-2-常用组件介绍

微信小程序常用组件 组件的定义: 开发者可以利用微信团队提供的框架中的一系列基础组件进行快速的开发,什么是组件? 组件是视图层的基本组成单元. 组件自带一些功能与微信风格的样式. 一个组件通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之间. 形式: <tagname property="value"> Content goes here </tagname> 例如: <view class="container">

微信小程序学习笔记-3-问题

一些在开发微信小程序中常见的问题 页面渲染 微信小程序中规定所有页面上渲染出来的数据,包括文字和图片皆包含在在每个页面文件夹中的js文件中的page这个内置函数的参数data中,page({data:{,}}),其实这个page的data感觉就是一个前端可以指定后台对象的一个快捷的方式,在wxml文件中可以用{{}}直接在页面展示page中的对象或数据,这就是说这个page是前端和你的代码唯一的渲染方式,官方文档中有明确的说明,如果想要更改page中的任何一个变量或者json对象,必须要用,th

微信小程序学习笔记1

初步接触微信小程序开发 微信小程序的开发环境 微信小程序是运行在微信环境中的应用,它只能在微信中运行,不能运行在浏览器等其他环境中,微信团队提供了专门开发工具用于小程序的开发,还提供了API,让小程序具备与手机设备和微信交互的能力,例如获取摄像头拍照,访问文件系统等,主要提现在以下三个方面: 获取当前登录微信用户的用户信息 微信支付 使用模版消息向微信发送通知消息 开发微信需要具备一定的前端基础知识,但不是全部,wxml代替html ,wxss代替css,然后就是一些javascript的核心.

微信小程序学习笔记

1.在app.json中输入如下代码就会自动在pages下创建welcome文件夹及相应的wxss, wxml, js, json文件 "pages":[ "pages/welcome/welcome" ] 2.在进行wx.for的数据绑定时可以不需要使用{{item.***}}的方式来获取数据,只需要引入数据时在前面加三个小点将对象展开即可 <template is="templateName" data="{{...item}

微信小程序 学习笔记

1.pages 主要存放小程序的页面文件,其中每个文件夹为一个页面,每个页面包含四个文件, (1).wxml文件是界面文件: (2).js是事件交互文件,用于处理界面的点击事件等功能: (3).wxss为界面美化文件,让界面显示的更加美观: (4).json为配置文件,用于修改导航栏显示样式等 注意: (1)小程序每个页面必须有.wxml和.js文件,其他两种类型的文件可以不需要 (2)文件名称必须与页面的文件夹名称相同,如index文件夹,文件只能是index.wxml.index.wxss.

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

二阶段学习过程: (一)看官方文档的框架.组件.API:https://mp.weixin.qq.com/debug/wxadoc/dev/ (二)看极客学院第3.4章视频:http://www.php.cn/course/297.html (三)模仿并写出各个demo(模板应用demo.快递查询demo.登陆界面demo) 获取app.js的变量/方法: 前提:在app.js中定义了变量或所需方法 ①在当前页面的*.js最上面定义var app=getApp() ②在需要调用app中变量的方法

微信小程序-学习笔记5-UI布局

flex布局基础.相对定位和绝对定位 flex容器属性: flex-direction决定元素的排列方向:flex-wrap决定元素如何换行: flex-flow是 flex-direction和flex-wrap的简写,如flex-flow:row wrap; justify-content元素在主轴上的对齐方式:align-items元素在交叉轴的对齐方式: flex元素属性: flex-grow当有多余空间时,元素的放大比例:flex-shrink当空间不足时,元素的缩小比例: flex-

微信小程序-学习笔记12-交互反馈

toast.modal.actionsheet: ps:资料来源于微信官方文档及极客学院视频 原文地址:https://www.cnblogs.com/haimengqingyuan/p/8360412.html