微信小程序学习

17人阅读 评论(0) 收藏 举报
分类:

注册账号

开发工具
https://developers.weixin.qq.com/miniprogram/dev/devtools/new.html

使用语言
JSON、WXML、WXSS、JS

JSON:

app.json 是对当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。QuickStart 项目里边的 app.json 配置如下:

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

WXML:

从事过网页编程的人知道,网页编程采用的是 HTML + CSS + JS 这样的组合,其中 HTML 是用来描述当前这个页面的结构,CSS 用来描述页面的样子,JS 通常是用来处理这个页面和用户的交互。同样道理,在小程序中也有同样的角色,其中 WXML 充当的就是类似 HTML 的角色。打开 pages/index/index.wxml,你会看到以下的内容:

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
    <block wx:else>
      <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>


WXSS:

WXSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些扩充和修改。

  1. 新增了尺寸单位。在写 CSS 样式时,开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比,采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ,开发者可以免去换算的烦恼,只要交给小程序底层来换算即可,由于换算采用的浮点数运算,所以运算结果会和预期结果有一点点偏差。
  2. 提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同,你可以写一个 app.wxss 作为全局样式,会作用于当前小程序的所有页面,局部页面样式 page.wxss 仅对当前页面生效。
  3. 此外 WXSS 仅支持部分 CSS 选择器。

JS:

一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击、获取用户的位置等等。在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作。

<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>

点击 button 按钮的时候,我们希望把界面上 msg 显示成 "Hello World",于是我们在 button 上声明一个属性: bindtap ,在 JS 文件里边声明了 clickMe 方法来响应这次点击操作:

Page({
  clickMe: function() {
    this.setData({ msg: "Hello World" })
  }
})



查看评论

微信小程序学习篇(一)

Hi! 最新小程序很"火",然后我也就紧跟时代步伐。简单的学习了一下。把笔记记下来,以便自己更好的学习和复习。       言归正传,任何技术学习起来都要先了解一下发展背景:       一、什么是微...
  • liu13722785488
  • liu13722785488
  • 2016-10-14 16:03:37
  • 1743

微信小程序学习视频

  • 2017年11月27日 10:53
  • 48B
  • 下载

微信小程序学习之路(一)

小程序开发简易教程: 获取AppID https://mp.weixin.qq.com – 设置 – 开发者设置中 下载开发者工具 创建项目 a...
  • github_38847071
  • github_38847071
  • 2017-06-14 17:11:31
  • 1196

微信小程序学习笔记(1)----学习资料整理

微信小程序破解教程微信小程序只对少部分开放公测名额,大部分人都是没有权限,所以想要体验微信小程序开发还是需要破解一下的,破解方法比较简单,GitHub上早已有了破解教程https://github.c...
  • whzhaochao
  • whzhaochao
  • 2016-09-28 16:36:08
  • 3127

从零开始做微信小程序后端---学习日记

wx.login(OBJECT)调用接口获取登录凭证(code)进而换取用户登录态信息,包括用户的唯一标识(openid) 及本次登录的 会话密钥(session_key)等。用户数据的加解密通讯需要...
  • qq_14810357
  • qq_14810357
  • 2018-03-03 01:04:40
  • 142

微信小程序学习 (一)

这两天在看微信小程序的东东,在此整理一下。首先标明,个人用户无法申请小程序开发资格。什么是微信小程序 微信小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一...
  • lm278858445
  • lm278858445
  • 2016-11-28 16:04:53
  • 420

微信小程序学习用demo推荐:读书;小清新

点评:清新的界面设计,功能很简洁,但是都是完整可用的   项目地址及下载: 本帖隐藏的内容 https://github.com/Zacharyweb/qiduApp  qi...
  • sinat_17775997
  • sinat_17775997
  • 2017-03-12 13:00:58
  • 687

小程序自学笔记(零基础学小程序汇总)---史上最全的微信小程序学习笔记,笔记看我你也就学会小程序了

小程序自学笔记(零基础学小程序汇总)---史上最全的微信小程序学习笔记,笔记看我你也就学会小程序了...
  • qiushi_1990
  • qiushi_1990
  • 2016-11-28 18:43:08
  • 4899

微信小程序开发学习视频

  • 2017年10月27日 13:40
  • 57B
  • 下载

原创:从零开始,微信小程序新手入门宝典《一》

为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方便的从零开始学习; 一:微信小程序的特点 张小龙:张小龙全面阐述小程序,推荐通读此文; 小程序是...
  • AAASai_
  • AAASai_
  • 2017-01-06 12:03:56
  • 5429
    个人资料
    持之以恒
    等级:
    访问量: 581
    积分: 158
    排名: 113万+
    文章分类
    文章存档