微信小程序开发，速成！！！（看完这一篇就够了）

一，什么是微信小程序

微信小程序是一种基于微信平台的应用程序，用户可以在微信中直接使用，无需下载安装。

二，注册微信小程序

如果你还没有微信公众平台的账号，请先进入微信公众平台首页，点击 “立即注册” 按钮进行注册。注册的账号类型可以是订阅号、服务号、小程序以及企业微信，我们选择 “小程序” 即可。

小程序 (qq.com)

接着填写账号信息，需要注意的是，填写的邮箱必须是未被微信公众平台注册、未被个人微信号绑定的邮箱，而且每个邮箱仅能申请一个小程序。

三，微信小程序开发者工具

1，下载

微信开发者工具下载地址与更新日志 | 微信开放文档 (qq.com)

根据自己电脑选择合适的版本

注意：进去的时候要用一个开发者ID，这个在你申请上的小程序的时候有

2，工具介绍

3，文件目录介绍

    .
    ├── app.js     # 小程序的逻辑文件
    ├── app.json   # 小程序的配置文件
    ├── app.wxss   # 全局公共样式文件
    ├── pages      # 存放小程序的各个页面
    │   ├── index  # index页面
    │   │   ├── index.js     # 页面逻辑
    │   │   ├── index.wxml   # 页面结构
    │   │   └── index.wxss   # 页面样式表
    │   └── logs   # logs页面
    │       ├── logs.js      # 页面逻辑
    │       ├── logs.json    # 页面配置
    │       ├── logs.wxml    # 页面结构
    │       └── logs.wxss    # 页面样式表
    ├── project.config.json
    └── utils
        └── util.js

 

注意：小程序里面的WXSS就相当于CSS, WXML相当与HTML,JOSN文件用来存放配置文件

小程序官方建议把所有小程序的页面，都存放在 pages 目录中，以单独的文件夹存在

四，开发

1，JSON配置

（1）JSON配置文件的作用
JSON 是一种数据格式，在实际开发中，JSON 总是以配置文件的形式出现。小程序项目中也不例外: 通过不同的json 配置文件，可以对小程序项目进行不同级别的配置。

小程序项目中有 4种json 配置文件，分别是

项目根目录中的 app.json 配置文件
项目根目录中的 project.config.json 配置文件
项目根目录中的sitemap.json 配置文件
每个页面文件夹中的 .json 配置文件

注意：

哪个page在最上面，默认显示哪页，

json要求严格语法，不能有多余的注释和逗号

（2）app.json 文件

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、窗口外观、界面表现、底部 tab 等。

简单了解下这4个配置项的作用:

1. pages: 用来记录当前小程序所有页面的路径
2. window: 全局定义小程序所有页面的背景色、文字颜色等
3. style: 全局定义小程序组件所使用的样式版本
4. sitemapLocation: 用来指明 sitemap.json 的位置

（3）project.config.json 文件
project.config,json 是项目配置文件，用来记录我们对小程序开发工具所做的个性化配置，例如:

setting 中保存了编译相关的配置
projectname 中保存的是项目名称
·appid 中保存的是小程序的账号 ID

（4）sitemapjson 文件 
 微信现已开放小程序内搜索，效果类似于 PC 网页的 SEO。sitemap.json 文件用来配置小程序页面是否允许微信索引。

当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功的时候，小程序的页面将可能展示在搜索结果中。

注意: sitemap 的索引提示是默认开启的，如需要关闭 sitemap 的索引提示，可在小程序项目配置文件project.config.json 的 setting 中配置字段 checkSiteMap 为 false。

（5）页面的 json 配置文件

小程序中的每一个页面，可以使用 .son 文件来对本页面的窗口外观进行配置，页面中的配置项会覆盖app.json 的 window 中相同的配置项

（6）新建小程序页面

只需要在 app.json --> pages 中新增页面的存放路径，小程序开发者工具即可帮我们自动创建对应的页面文件如图所示:

（7）修改项目首页

 只需要调整 app.json --> pages 数组2411中页面路径的前后顺序，即可修改项目的首页。小程序会把排在第一位的页面，当作项目首页进行渲染

2，WXML

常用的标签

scroll-view

• 可滚动的视图区域
• 常用来实现滚动列表效果

• 普通视图区域
• 类似于HTML中的div，是一个块级元素
• 常用来实现页面的布局效果

scroll-view

• 可滚动的视图区域
• 常用来实现滚动列表效果

 swiper 和 swiper-item

• 轮播图容器组件和轮播图 item 组件

text

• 文本组件
• 类似于HTML中的span 标签，是一个行内元素

 button

• 按钮组件
• 功能比HTML中的 button 按钮丰富
• 通过 open-type 属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等) 

image

• 图片组件
• image组件默认宽度约 300px、高度约240px
• 注意：微信小程序的单位是rpx，这个单位是微信小程序中特有的尺寸单位，也是把页面按比例分割达到自适应的效果。规定屏幕宽为750rpx，就是把屏幕宽度分成750部分，根据屏幕宽度进行自适应。可与 rem 换算：1 rem = (750/20) rpx =37.5 rpx

 navigator

• 这是最常见的一种跳转方式,相当于html里的a标签.但需要注意的是 该方法不能跳转tabbar页面.

 <navigator url="........"></navigator>
 <navigator url="/pages/event/event">前往event</navigator>

使用

wx.navigateTo.

通过构造js函数,在函数中调用该接口可实现页面跳转的效果.但该接口同样不能跳转tabbar页面.跳转后左上角有返回小箭头,点击可返回原本页面.

//<!**wxml文件**>
<view class="select_calculator" bindtap="next_calculator">
//js文件
next_calculator:function () {
    wx.navigateTo({
      url: '/pages/calculator/calculator',
    })

wx.redirectTo.

关闭当前页面，跳转到应用内的某个页面(不能跳转tabbar页面)。

类似于html中的 window.open(‘…’);
跳转后左上角出现返回小箭头,点击后可返回原本页面.

<view>
  <navigator open-type="redirect" url="/pages/event/event">跳转并替换</navigator>
</view>

---

tabBar

1. tabBar中只能配置最少 2 个、最多 5 个 tab 页签
2. 当渲染顶部 tabBar 时，不显示 icon，只显示文本

tabBar的组成

① backgroundColor：                tabBar 的背景色

② selectedIconPath：            选中时的图片路径

③ borderStyle：                    tabBar 上边框的颜色

④ iconPath：                    未选中时的图片路径

⑤ selectedColor：                tab 上的文字选中时的颜色

⑥ color：                        tab 上文字的默认（未选中）颜色

配置 tabBar 选项
① 打开 app.json 配置文件，和 pages、window 平级，新增 tabBar 节点
② tabBar 节点中，新增 list 数组 ，这个数组中存放的，是每个 tab 项的配置对象
③ 在 list 数组中， 新增每一个 tab 项的配置对象 。对象中包含的属性如下： pagePath 指定当前 tab 对应的页面路径 【 必填 】
text 指定当前 tab 上按钮的文字【 必填】
iconPath 指定当前 tab 未选中时候的图片路径【可选】
selectedIconPath 指定当前 tab 被选中后高亮的图片路径【可选】

 

{
    "pages": [
        "pages/hone/hone",
        "pages/Profile/Profile",
        "pages/experience/experience",
        "pages/skill/skill",
        "pages/index/index",
        "pages/logs/logs"
    ],
    "tabBar":{
        "color": "#777",
        "selectedColor": "#1cb9ce",
        "list":[
            {"pagePath": "pages/hone/hone","text":"简历信息","iconPath": "/pages/img/icon08.png","selectedIconPath": "/pages/img/icon08.png"},
            {"pagePath": "pages/skill/skill","text":"个人技能","iconPath": "/pages/img/icon04.png","selectedIconPath": "/pages/img/icon04.png"},
            {"pagePath": "pages/experience/experience","text":"项目经历","iconPath": "/pages/img/icon02.png","selectedIconPath": "/pages/img/icon02.png"},
            {"pagePath": "pages/Profile/Profile","text":"自我评价","iconPath": "/pages/img/icon06.png","selectedIconPath": "/pages/img/icon06.png"}
        ]
    },
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "Weixin",
        "navigationBarTextStyle": "black"
    },
    "style": "v2",
    "sitemapLocation": "sitemap.json"
}

3，语法（与vue大同小异）

1，文本渲染

{{ msg}}可以执行简单的js表达式
{{2+3}}
{{msg.length}}

2，条件渲染

wx:if=""
wx:elif=""
wx:else

3，列表渲染

wx:for="{{list}}"
wx:key="index"
    {{item}}
    {{index}}

4，自定义列表渲染

定义item与index的名称
wx:for="{{list}}}"
wx:for-item="myitem"
wx:for-index="myidx"
{{myidx}}
{{myitem}}

5，事件

bindInput     表单输入时
bindconfirm    表单输入确认
bindtap      点击时候

6，内置组件

view         组件块组件
text         组件行内组件
button       组件按钮
input        组件表单