微信开发者程序的使用及入门知识点

微信小程序之电商平台的构建@前端

这是我在学校没事看看到的一个关于用微信小程序开发开发一个电商平台的视频，然后觉得很有意思，就跟着人家视频里面的教程慢慢做出的一个小程序。以下是我的总结。

工具以及准备

首先去官网注册一个小程序账号

刚注册的小程序账号，基本信息尚未被初始化，推荐进行账号设置，包括基本信息设置，开发者设置和成员管理设置。基本信息设置不必多说，主要是开发者设置，因为这一步会出现一个appid，这个id是我们每次创建新项目都会用到的（当然也可以选择游客模式）；成员管理主要是设置项目的管理成员，只有管理成员才能在小程序设计完成后进行调试。

微信开发者工具的使用

在下载安装完成后，输入appid–不使用云服务–新建即可
创建自己的小程序，右键pages新建home目录，然后home右键新建page,同样命名为home。
设置小程序项目的默认首页 ，打开 app.json 全局配置文件，找到 pages 节点。这个 pages 节点 是一个数组，存储了项目中所有页面的访问路径。其中，pages 数 组中第一个页面路径，就是小程序项目的默认首页。
修改 pages 数组中路径的顺序，即可修改小程序的默认首页。（这里要注意该换顺序后的标点符号的增删）
这样这个项目就属于自己了，可以继续开发。至于微信小程序中常用的ui和组件我就不一一细说，一时间也不知道如何总结。

小程序中的样式

关于rpx

要注意1rpx=0.5px=1物理像素
这里可以通过一道例题来理解样式问题。
使用rpx尺寸单位，绘制一个红色背景的view组件，使之在各种尺寸的移动端屏幕上，能够自适应调整自身的宽度，都显示为占屏幕宽度的一半。
首先在wxml页面，

使用rpx绘制占屏幕宽度一半的盒子

通过class属性为view组件命名为v1
然后wxss页面，

v1{ 
width: 375rpx; 
height: 375rpx; 
background-color: red; 
} 

（小程序中的rpx尺寸单位，把所有宽度尺寸的屏幕，统一划分为了 750 份，不论大屏幕还是小屏幕，375rpx 会被小程序识别，并渲染为屏幕宽度的一半。 ）

全局样式与局部样式

全局样式定义在app.wxss,作用于每一个页面；
局部样式定义在page中的wxss，只作用于当前page，并且会覆盖当前页面的全局样式。

全局配置文件app.json

作用及主要节点

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，它决定了页面文件的路径、窗口表现、 设置网络超时时间、设置多 tab 等。
最主要的配置节点是：
 pages 数组：配置小程序的页面路径
 window 对象：用于设置小程序的状态栏、导航条、标题、窗口背景色
 tabBar 对象：配置小程序的tab栏效果
更详细我就不在这里写了，详细写实在太多了。

页面配置文件app.json

小程序中，app.json 中的 window节点，可以全局配置小程序中每个页面的窗口表现；
如果某些小程序页面，想要拥有特殊的窗口表现，此时，“页面级别的.json配置文件”就可以实现这种需求； 即页面级别配置优先于全局配置生效。

小程序的生命周期

在小程序中，包含两种类型的生命周期：
 应用生命周期：特指小程序从启动 -> 运行 -> 销毁的过程；
 页面生命周期：特指小程序中，每个页面的加载 -> 渲染 -> 销毁的过程；其中，页面的生命周期范围较小，应用程序的生命周期范围较大。

生命周期函数

有两种，应用生命周期函数和页面生命周期函数。
应用生命周期函数：app.js 是小程序执行的入口文件，在 app.js 中必须调用 App() 函数，且只能调用一次。其中，App() 函数是用 来注册并执行小程序的。
App(Object) 函数接收一个Object参数，可以通过这个Object参数，指定小程序的生命周期函数。
页面周期函数：每个小程序页面，必须拥有自己的 .js 文件，且必须调用 Page() 函数，否则报错。其中Page() 函数用来注册 小程序页面。
Page(Object) 函数接收一个Object参数，可以通过这个Object参数，指定页面的生命周期函数 。

视图与逻辑

数据绑定与事件绑定

数据绑定

如何定义页面的数据 ？
小程序中每个页面，由4部分组成，其中 .js 文件内可以定义页面的数据、生命周期函数、其它业务逻辑；
如果要在.js文件内定义页面的数据，只需把数据定义到 data 节点下即可，

Page({ 
  data: { 
    info: 'init data', // 字符串类型的数据 
    array: [{msg: '1'}, {msg: '2'}] // 数组类型的数据 
  } 
}) 
 

把data中的数据绑定到页面中渲染，使用 Mustache 语法（双大括号）将变量包起来即可； 例如， {{ 要绑定的数据名称 }}
Mustache 语法的主要应用场景：
 绑定内容
页面结构

<view> {{ message }} </view> 

页面数据

Page({ 
  data: { 
    message: 'Hello MINA!' 
  } 
}) 

  

绑定属性

<view id="item-{{id}}"> </view> 

 Page({ 
  data: { 
    id: 0 
  } 
}) 

运算（三元表达式、算术运算、逻辑判断、字符串运算、数据路径运算）
以三元运算举例： {{ flag ? ‘条件为真’ : ‘条件为假’ }}

Page({ 
  data: { 
    flag: true 
  } 
}

事件绑定

在小程序中，不存在网页中的 onclick 鼠标点击事件，而是通过 tap 事件来响应触摸行为；

1. 通过 bindtap，可以为组件绑定触摸事件，语法如下： Click me!
2. 2.在相应的Page定义中写上相应的事件处理函数，事件参数是event：

Page({ 
  tapName: function(event) { 
    console.log(event) 
  } 
}

通过 input 事件来响应文本框的输入事件
1 ， bindinput绑定文本框输入事件

<input bindinput=“inputName”><input> 

2.在相应的Page定义中写上相应的事件处理函数，事件参数是event：

Page({ 
  inputName: function(event) { 
    console.log(event) 
  } 
}) 

data和文本框之间的数据同步

监听文本框数据变化：

inputName: function (event) { 
// 获取到文本框中最新的内容 
console.log(event.detail.value) 
} 

修改data中数据：通过 this.setData(dataObject) 方法，可以给页面中的 data 数据重新赋值。

inputName: function (event) { 
this.setData({ 
msg: event.detail.value // 为 data 中的 msg 重新赋值 
}) 
}  

事件传参

通过 data-* 自定义属性传参 其中，info 会被当作参数名，数值 123 会被当作参数值。

<button bindtap='btnHandler’ data-info=“{{123}}”>事件传参</button> 

获取 data-* 自定义属性中传递的参数 ，获取 data-* 自定义属性传递到事件处理函数中的参数，

btnHandler: function(event){ 
console.log(event.target.dataset.info) 
} 

先到此为止 慢慢总结把，这些是我作为一个初学者所能总结到的东西，因为我的专业偏向于java后台，这只是我的一个业余喜好，更是我的第一次发帖，有什么遗漏或者错误的地方希望能体谅一下。希望能帮到有需要的人，源代码以及成品效果我会在下一篇文章中上传。