微信小程序入门1.0

一.创建项目

---

1.准备工作

注册开发者账号（微信公众开发平台：https://mp.weixin.qq.com/）

安装小程序（微信开发者工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html）

 开发工具创建项目

---

2.认识项目目录

pages 是存放所有视图的目录

utils 是存放工具类库的目录

assets 是存放资源库的目录

app.js 是小程序的全局入口文件

app.json 是小程序的全局配置文件

app.wxss 是小程序的全局样式文件

project.config.json 是项目的配置文件

sitemap.json 是小程序的SEO优化文件，方便用户搜索到该小程序

---

3.app.json

pages里面注册的是视图

window 是全局窗口配置

backgroundTextStyle 设置文本样式

navigationBarBackgroundColor 设置导航栏背景

navigationBarTitleText 设置导航栏文本

navigationBarTextStyle 设置导航栏文本样式

style 设置样式级别，默认是v2

sitemapLocation 指明 sitemap.json 的位置；默认为 'sitemap.json' 即在 app.json 同级目录下名字的 sitemap.json 文件

---

 4.app.wxss

是小程序的全局样式文件，其实就是css文件(配置所有页面需要的样式）

---

5.project.config.json

是小程序的项目配置文件，也可以通过：详情-本地设置

---

6. 页面组成

xxx.wxml 是页面，相当于html文件，但是它里面不能写原生的html标签，只能写微信自己的组件。

xxx.wxss 是样式，相当于css文件。

xxx.js 是js文件，书写页面逻辑程序。

xxx.json 是配置文件，配置当前页面信息。

---

7. xxx.wxml

view组件，相当于html中的div标签。

text组件，相当于html中span标签。

swiper是滑块视图组件，它里面只能放swiper-item组件。

image是图片组件，注意：小程序里面的图片最好全部采用网络图片，因为单个小程序打包后的代码总体积不能超过2MB。

通过插值表达式{{}}，可以执行显示data里面的数据。

wx:for指令用于循环数组数据，生成组件。

item就是循环出来的每一项，index是每一项对应的索引。

item和index可以重命名，方式是wx:for-item="XXX" wx:for-index="XXX"。

wx:key="index"，设置每一项唯一的标识。

bindtap是点击事件，组件通过data-xxx传递数据。

---

8. xxx.wxss

微信为了让页面里面的内容在各种设备上能够正常显示，提供了一种响应式单位rpx。

在iphone6尺寸中，1px==2rpx。

---

9. xxx.js

其实每个微信页面，就是一个Page()函数。该函数的参数是一个对象。

在Page()函数中添加页面的数据，方法等等。

页面中的数据，全部放到data中。

定义方法：

del(e){//获取组件传递的参数i（i是索引）let  i=e.currentTarget.dataset.i//根据指定的索引，从数组中，删除对应的数据this.data.goodsList.splice(i,1)//数组中的数据删除后，还要触发页面更新this.setData({//将最新的数据，传递给页面显示goodsList:this.data.goodsList})}//this指向当前页面对象。//setData()方法，触发页面更新哪些数据。

---

10. xxx.json

配置当前页面信息，用法跟app.json一样。