微信小程序学习资料整理

Posted 抖音的博客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序学习资料整理相关的知识,希望对你有一定的参考价值。

基础篇

官网:

微信小程序:

小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。

微信公众号和小程序的主要区别?

1、定位不同(公众号服务于营销与信息传递,小程序面向产品与服务)

2、实现技术区别 (公众号基于H5(html5 vue angular react ionic),

小程序必须用小程序的语法开发)

3、用户体验 (小程序的用户体验要比 html5好一些,更接近原生app)

4、调用原生的能力 (微信公众号可以借助jssdk调用手机的摄像头拍照 ,调用扫描二

维码等 能力有限。 小程序调用原生的能力非常强大,能实现几乎app能实现的所有功

能) (调用原生的功能 *可以不开发app )

5、微信app上面的入口不一样

微信小程序的应用场景:

互联网+ 物联网+ 人工智能+

餐厅点餐+小程序

      基于LBS小程序直接搜索附近的餐厅,进店用进行扫码点餐、支付。

无人点餐:

公交+小程序
  
      公交车站放一个小程序二维码,扫一扫就知道公交什么时候来。

买电影票+小程序

     进入小程序直接搜附近电影院下单搞定。


加油站缴费+小程序
  
      加油下车排队缴费太麻烦,扫小程序不用下车就能解决。

火车上叫餐+小程序
  
      不用去固定车厢点餐,扫座椅后背的小程序二维码下单,乘务员给你送来。

旅行+小程序
  
      旅行酒店预订、周边攻略、目的地、游记等都可以在小程序里轻松搞定。

快递+小程序
  
      一键打开快递小程序,查看自己的订单,查看快递送达的时间,查看宝贝现在的物流情况。

医疗+小程序
      
      用小程序,提前挂号、网上排队,就医后扫码支付,直接拿药

景区+小程序
  
      扫描景点门票小程序的二维码,即可查看景区详情

零售+小程序
  
      想吃个水果或吃点零食,直接搜索附近小程序下单,送货上门。

小程序开发文档、开发工具、开发指南、体验demo


开发文档

开发工具

体验demo

https://developers.weixin.qq.com/miniprogram/dev/demo.html

 微信开放社区

微信小程序的目录结构

.json 后缀的 JSON 配置文件
.wxml 后缀的 WXML 模板文件
.wxss 后缀的 WXSS 样式文件
.js 后缀的 JS 脚本逻辑文件

 JSON 配置

我们可以看到在项目的根目录有一个 app.json 和 project.config.json,此外在 pages/logs 目录下还有一个 logs.json,我们依次来说明一下它们的用途。

小程序配置 app.json

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

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

我们简单说一下这个配置各个项的含义:

  1. pages字段 —— 用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。(写好页面路径保存,可以直接生成文件
  2. window字段 —— 定义小程序所有页面的顶部背景颜色,文字颜色定义等。

其他配置项细节可以参考文档 小程序的配置 app.json 。

工具配置 project.config.json

在工具上做的任何配置都会写入到这个文件,当你重新安装工具或者换电脑工作时,你只要载入同一个项目的代码包,开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置,其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

其他配置项细节可以参考文档 开发者工具的配置 。

页面配置 page.json

让开发者可以独立定义每个页面的一些属性,例如顶部颜色、是否允许下拉刷新等等。

其他配置项细节可以参考文档 页面配置 。

WXML 模板

 WXML 充当的就是类似 HTML 的角色。

更详细的文档可以参考 WXML

WXSS 样式

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

  1. WXSS在底层支持新的尺寸单位 rpx 。

  2. 可以写一个 app.wxss 作为全局样式,会作用于当前小程序的所有页面,局部页面样式 page.wxss 仅对当前页面生效。

  3.  WXSS 仅支持部分 CSS 选择器

更详细的文档可以参考 WXSS 。

JS 交互逻辑

通过编写 JS 脚本文件来处理用户的操作。

响应用户的操作就是这么简单,更详细的事件可以参考文档 WXML - 事件 。

 

微信小程序事件、方法、事件对象、方法传值、获取data数据、修改data数据、冒泡非冒泡事件

<!--pages/news/news.wxml-->
<view>
{{msg}}
</view>

<button size=\'mini\' bindtap="run">
 执行run方法,注意触发方法不需要写()
</button>

<button size=\'mini\' bindtap="getMsg">
 获取msg中的值
</button>

<button size=\'mini\' bindtap="setMsg">
 改变msg中的值
</button>

  

// pages/news/news.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    msg: \'小程序中的msg\'
  },
 /**
   * 自定义方法
   */
  run() {
    console.log(\'执行小程序run方法!\')
  },
  /**
   * 获取data中的值
   */
  getMsg() {
    // 获取data中的数据
    const msg = this.data.msg
    console.log(msg)
  },
  /**
 * 设置data中的值
 */
  setMsg() {
    // 设置data中的数据
    this.setData({
      msg:\'改变msg中的值\'
    })
    console.log(this.data.msg)
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 执行自定义方法
    this.getMsg()
  }
})

  

 

以上是关于微信小程序学习资料整理的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序代码片段分享

微信小程序学习资料整理

微信小程序来了,整理微信小程序学习教程网站

微信小程序事件始末及相关资料整理

微信小程序视图层WXML_模板

微信小程序最新开发资源汇总,对学习微信小程序的新手有一定帮助