微信小程序入门(一)

前言: 文中参照官方文档, 加入一些自己的理解.

入门(一)
基础(二)
进阶(三)
综合(四)

  • 账号申请
  • 登录获取AppID
  • 开发工具
  • 各个类型文件解析
  • 支持的运算
  • 代码演示
  • 如何调试

一. 微信小程序账号申请

https://mp.weixin.qq.com/wxopen/waregister?action=step1 然后一步一步按照注册流程走就好了, 这里没有需要注意的点.

二. 登录

https://mp.weixin.qq.com 可以在菜单 “设置”-“开发设置” 看到小程序的 AppID 了.

展示AppID所在位置

三. 开发工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=18111420 这个根据自己的电脑的操作系统自行选择就好.

支持的系统: Windows 64位 / Windows 32位 / Mac OS

还可以使用: Visual Studio Code, sublime Text等.

四. 文件解析

样图 - 3
  • app.json : 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等等
  • xx.josn: 单页面配置
{
  /// 页面路径配置
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    /// 全局样式设置
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
},
"tabBar": {
    "selectedColor": "blue",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "pages/resource/2.png",
        "selectedIconPath": "pages/resource/1.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "iconPath": "pages/resource/2.png",
        "selectedIconPath": "pages/resource/1.png",
        "text": "日志"
      }
    ]
  }

pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。

备注 : 详情可以参照这里

小程序生命周期

属性 描述 触发时机
onLaunch 生命周期回调—监听小程序初始化 小程序初始化完成时（全局只触发一次）
onShow 生命周期回调—监听小程序显示 小程序启动，或从后台进入前台显示时
onHide 生命周期回调—监听小程序隐藏 小程序从前台进入后台时
onError 错误监听函数 小程序发生脚本错误，或者 api 调用失败时触发，会带上错误信息
onPageNotFound 页面不存在监听函数 小程序要打开的页面不存在时触发，会带上页面信息回调该函数

  • project.config.json: 通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。考虑到这点，小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。(这是之后新增的).

  • WXML: 网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构布局，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。微信小程序也类似, 其中 WXML 充当的就是类似 HTML 的角色, 代码结构大致如下:

<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>

HTML 经常会用到的标签是 div, p,span , 而小程序使用的WXML 用的标签是 view,button, text 等等, 就是小程序给开发者包装好的基本能力.

补充: 多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式

小程序的框架也是用到了MMVM这个思路，如果你需要把一个 Hello World 的字符串显示在界面上, 你可以这样做 。
通过 {{ }} 的语法把一个变量绑定到界面上，我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。

在WXML文件

<text>{{msg}}</text>

在xx.js文件

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

具体演示代码
index.wxml

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

index.js 这里相应用户的点击并把夏天很暖传给view, 并显示出来

clickMe: function () {
    this.setData({ msg: "夏天很暖" })
  }

详细可以看这里 这里不做展开, 如果有下节, 可以继续深入研究.

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

备注说明: 全局样式与局部样式

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

  • JS交互: 界面展示为小程序的一部分, 同时也要有和用户的交互, 响应用户的点击、获取用户的位置等。在小程序里边，可以通过编写 JS 脚本文件来处理用户的操作。
    详细请看这里, 事件相关

界面生命周期

属性 类型 描述
data Object 页面的初始数据
onLoad Function 生命周期回调—监听页面加载
onShow Function 生命周期回调—监听页面显示
onReady Function 生命周期回调—监听页面初次渲染完成
onHide Function 生命周期回调—监听页面隐藏
onUnload Function 生命周期回调—监听页面卸载
onPullDownRefresh Function 监听用户下拉动作
onReachBottom Function 页面上拉触底事件的处理函数
onShareAppMessage Function 用户点击右上角转发
onPageScroll Function 页面滚动触发事件的处理函数
onResize Function 页面尺寸改变时触发，详见 响应显示区域变化
onTabItemTap Function 当前是 tab 页时，点击 tab 时触发
其他 Any 开发者可以添加任意的函数或数据到 Object 参数中，在页面的函数中用 this 可以访问

五. 其他

支持的运算: 基本运算(+ - * / %), 位运算(& ^ ! << >> ) , 比较运算 (< > <= >= ), 一元运算, 二元运算, 三目运算等.

详细可以看这里

支持的语句: if, switch, for, while, do ... while;

六. 一个列表代码示例

屏幕快照 2018-11-20 上午12.53.52.png

test.js

var app = getApp()
Page({
  data: {
    userInfo: {},
    userListInfo: [{
      text: '我的订单',
      isunread: true,
      unreadNum: 2,
      icon: '../resource/jiantou.png',
      des: '夏天很暖111111111111'
    }, {
      text: '我的代金券',
      isunread: false,
      unreadNum: 2,
      des: '夏天很暖2222222222222'
    }, {
      text: '我的拼团',
      isunread: true,
      unreadNum: 1,
      des: '夏天很暖33333333'
    }, {
      text: '收货地址管理',
      isunread: true,
        unreadNum: 2
    }, {
      text: '联系客服',
      isunread: true,
        unreadNum: 2
    }, {
      text: '常见问题',
      isunread: true,
        unreadNum: 2
      }, {
        text: '收货地址管理',
        isunread: true,
        unreadNum: 2
      }, {
        text: '联系客服',
        isunread: true,
        unreadNum: 2
      }, {
        text: '常见问题',
        isunread: true,
        unreadNum: 2
      }, {
        text: '收货地址管理',
        isunread: true,
        unreadNum: 2
      }, {
        text: '联系客服',
        isunread: true,
        unreadNum: 2
      }, {
        text: '常见问题',
        isunread: true,
        unreadNum: 2
      }
    ]
  }
})

test.wxml

<block wx:for="{{userListInfo}}" wx:for-item="item" wx:for-index="index">
    <view class="ui_cell">

        <view class="ui_cell_bd">
            <view class="ui_cell_bd_p"> {{item.text}} </view>
      <view class="ui_cell_title"> {{item.des}} </view>
        </view>
    
        <view wx:if="{{item.isunread}}" class="badge">{{item.unreadNum}}      </view>

        <view class="with_arrow">
      <image style="width: 20px; height: 15px"src="../resource/jiantou.png"></image>
    </view>

    </view>
</block>

test.wxss

/* 

*** position: 属性规定元素的定位类型
*absolute: 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
*fixed: 生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
*relative: 生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

*** display: 属性规定元素应该生成的框的类型 * * *http://www.w3school.com.cn/cssref/pr_class_display.asp
*
*/

/*
** padding: 简写属性在一个声明中设置所有内边距属性
* padding:10px 5px 15px 20px; 上右下左
* padding:10px 5px 15px; 上右下
* padding:10px 5px; 上下10 左右5
* padding:10px; 四边
*/

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 160px;
}

.btn {
  width: 200px;
  height: 40px;
  background-color: cyan;
}

.clickBtn {
  width: 400rpx;
  height: 100rpx;
  background-color: yellow;
}

Demo链接 https://github.com/summerxx27/WXApplet

调试工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/debug.html#调试工具

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,080评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,422评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,630评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,554评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,662评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,856评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,014评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,752评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,212评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,541评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,687评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,347评论 4赞 331
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,973评论 3赞 315
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,777评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,006评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,406评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,576评论 2赞 349