微信小程序入门（一）

微信小程序

### 登录微信开放平台    微信开放平台 (qq.com)https://open.weixin.qq.com/

### 注册小程序账号

### 安装小程序开发工具

 创建项目

### 第一个小程序

1. 创建项目。
  1. 项目目录尽量不要有中文、特殊字符等。最后一个目录为空目录。
  2. 选择正确的appid。
  3. 不使用云服务。
  4. 不使用模板。
2. 熟悉开发工具。
  1. 工具栏、编译工具、真机预览、真机调试。
  2. 手机模拟器(ctrl+D)、编辑器(ctrl+E)、调试器(ctrl+J)。

熟悉项目目录结构

pages                         存储小程序所有的页面
  |-- index                   描述一个完整的index页面。
        |-- index.js          定义index页面中所需要的脚本代码
        |-- index.json        定义index页面的配置
        |-- index.wxml        定义index页面的组件结构
        |-- index.wxss        定义index页面的组件样式
  |-- app.js     项目全局初始化脚本
  |-- app.json   定义全局配置
  |-- app.wxss   定义全局样式
  |-- project.config.json   定义当前项目的配置信息
 

`app.json`

`app.json`用于定义全局配置参数。

`pages`配置项

"pages": [
    "pages/index/index",
    "pages/demo/demo",
    "pages/cart/cart",
    "pages/test/test"
],

 `pages`配置项用于定义当前项目中所有的页面。`pages`数组的第一个元素将会被当做项目的首页。意味着打开项目后的第一个页面。

`window`配置项

`window`配置项用于定义小程序页面的表现形式：

"window": {
    "backgroundTextStyle": "dark",

    "navigationBarBackgroundColor": "#f03d37",
    "navigationBarTitleText": "学子影院",
    "navigationBarTextStyle": "white"
},

`style`

> 基础库 2.8.0 开始支持，低版本需做[兼容处理](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)。

微信客户端 7.0 开始，UI 界面进行了大改版。小程序也进行了基础组件的样式升级。app.json 中配置 `"style": "v2"`可表明启用新版的组件样式

`sitemapLocation`

指明 [sitemap.json](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/sitemap.html) 的位置；默认为 `'sitemap.json'` 即在 `app.json` 同级目录下名字的 `sitemap.json` 文件

`tabbar`配置项

 "tabBar": {
    "color": "#444",
    "selectedColor": "#f03d37",
    "list": [{
      "text": "首页",
      "pagePath": "pages/index/index",
      "iconPath": "/images/index_disable.png",
      "selectedIconPath": "/images/index_enable.png"
    },{
      "text": "影院",
      "pagePath": "pages/theatre/theatre",
      "iconPath": "/images/theatre_disable.png",
      "selectedIconPath": "/images/theatre_enable.png"
    },{
      "text": "我的",
      "pagePath": "pages/me/me",
      "iconPath": "/images/me_disable.png",
      "selectedIconPath": "/images/me_enable.png"
    }]
  },

 

`app.wxss`

定义全局样式。

`app.js`

`app.js`是小程序全局脚本入口。在此处可以定义整个应用程序的生命周期钩子方法，全局共享的数据等信息。

### 小程序的组件库

#### 小程序组件的属性

1. 如果小程序组件的属性为`boolean`类型，则为该属性赋值的方法：

<view hover-stop-propagation="{{true}}"></view>
<view hover-stop-propagation="{{false}}"></view>
或：
<view hover-stop-propagation></view>   当做true来看待

2.小程序组件的属性名可以使用短横线命名法，也可以使用小驼峰命名法，二者皆可正确的设置组件属性：

 

<view hover-stop-propagation="{{true}}"></view>
<view hoverStopPropagation="{{true}}"></view>

`view`

`view`组件用于表示视图容器。基本用法：

<view class="定义类名"
      hover-class="定义点击状态下使用的样式类名"
      hover-start-time=""
      hover-stay-time=""
      hover-stop-propagation=""></view>

案例： 创建`pages/view/view`新页面作为首页。

 `Image`组件

`image`组件用于实现图片。

<image src="图片路径"
       mode="裁切模式"
       lazy-load="懒加载"
       show-menu-by-longpress="长按弹出菜单"></image>

案例：`pages/image/image`

`rpx` `responsitive Pixels` 响应式像素

小程序为了方便做适配，提供了一个全新的单位：`rpx`。相同的rpx值，在不同的设备下真实渲染的大小不同。同样是100rpx，在小屏手机下所占用的物理像素个数比在大屏收集下所占用的物理像素个数要少。（显示的更小）

使用规则：无论在任何设备下，屏幕总宽度都是`750rpx`。

 `swiper`组件

`swiper`组件用于实现轮播图。基本结构如下：

 

<swiper
  indicator-dots="{{true}}"
  indicator-color="#0007"
  indicator-active-color="#0f09"
  duration="300"
  interval="5000"
  autoplay
  circular
  vertical
  bindchange="changeSwiper">
    <swiper-item>
        <image src="..."></image>
    </swiper-item>
    <swiper-item>
        <image src="..."></image>
    </swiper-item>
    ........
</swiper>

案例：`pages/swiper/swiper`

 `text`组件

`text`组件用于显示文本。基本结构：

<text space="emsp" 
      decode="{{true}}"
      user-select="{{true}}">
    段落段落段落段落
</text>

`navigator`组件

`navigator`组件用于小程序中页面之间的跳转。基本用法

<navigator url="/pages/demo/demo"
           open-type="打开目标页面的方式">点我跳转到demo页</navigator>

`open-type:` 打开目标页面的方式，主要有以下5种：

1. `navigate` 默认的跳转方式：保留跳转。保留当前页，创建目标页，跳转到目标页面。这种方式无法跳转到`tabbar`页面（在`app.json`中配置了底部选项卡的页面）。
  
2. `navigateBack` 这种方式可以销毁当前页，返回到上一页。还可以借助于delta属性，返回到上n页。
  
3. `switchTab` 这种方式可以跳转到tabbar页面，但是一旦使用这种方式进行跳转，将会销毁内存中所有非tabbar页面。
  
4. `redirect` 这种方式的跳转过程：销毁当前页，创建目标页、跳转到目标页。这种方式也不能跳转到tabbar页面。
  
5. `reLaunch` 这种方式代表重新启动小程序。使用这种方式跳转将会销毁内存中的所有页面。然后创建并跳转到目标页。

`scroll-view`组件

`scroll-view`组件用于定义可滚动的视图容器。基本结构如下：

<scroll-view scroll-x="是否开启水平方向滚动条"
             scroll-y="是否开启垂直方向滚动条">
    ..............
    ..............
    ..............
</scroll-view>