微信小程序初体验

最近倒腾了一下微信小程序，按照微信官方的开发文档一步一步来进行，还是很容易做出一个完整的小程序的，整理记录一下我在做的过程中的一些注意点。

微信官方开发文档网址：https://mp.weixin.qq.com/debug/wxadoc/introduction/index.html?t=1500616227

一、下载微信开发者工具

• 就像开发我也需要sublime一样，开发微信小程序也要有相应的编辑器，就是开发者工具了。只要下载直接安装就行，启动工具时，开发者需要使用微信号扫描二维码登录，后续所有的操作都会基于这个微信帐号。登录之后就可以新建项目进行操作了。
  开发者工具.png

二、注册微信小程序

• 可以不用注册，注册和不注册的区别就是注册之后会有一个AppID，做完的小程序可以上传到微信平台在手机上查看；如果不注册不填AppID就可以了，可以在开发工具上进行实时查看，就我测试，效果和真机上的效果是一样的。
• 注册之后可以在后台对小程序进行一些设置，当然这些都是上线之后的一些设置，比如小程序的名称、开启时的头像等等，这里不做详细的介绍。

三、新建一个项目

• 点击新建就可以对小程序进行创建，如果注册了微信小程序，可以获得AppID填写，如果没有注册，选择没有AppID的选项就可以进行开发了，区别就是是否可以上传在手机上预览的区别，其它开发功能基本不受限制。
• 新建项目之后点击确定就进入了开发界面了，有无AppID的区别就是在项目菜单下的上传和预览功能受限。

• 项目创建成功后，我们就可以点击该项目，进入并看到完整的开发者工具界面，点击左侧导航，在“编辑”里可以查看和编辑我们的代码，在“调试”里可以测试代码并模拟小程序在微信客户端效果，在“项目”里可以发送到手机里预览实际效果。

  
  新建项目.png
  无AppID.png

四、开发结构

• 点击开发者工具左侧导航的“编辑”，我们可以看到这个项目，已经初始化并包含了一些简单的代码文件。最关键也是必不可少的，是 app.js、app.json、app.wxss 这三个。其中，.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件。微信小程序会读取这些文件，并生成小程序实例。每个文件的作用在开发文档里都有详细的解释：https://mp.weixin.qq.com/debug/wxadoc/dev/index.html?t=2017621
• 在这个教程里，我们有两个页面，index 页面和 logs 页面，即欢迎页和小程序启动日志的展示页，他们都在 pages 目录下。微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中，且 pages 中的第一个页面是小程序的首页。
  每一个小程序页面是由同路径下同名的四个不同后缀文件的组成，如：index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件，.wxml后缀的文件是页面结构文件。每个文件的作用在开发文档里都有详细的解释：https://mp.weixin.qq.com/debug/wxadoc/dev/index.html?t=2017621
  开发结构.png

五、实践过程中的注意点

• 框架实现的 tabbar，最多5个 tab;通过 wx. navigateTo 推入后台的页面最多5层（即navigator跳转打开的页面不能超过5个），超过会无法打开新页面，即点击新页面没有反应。

  
  tabbar.png
• navigator标签相当于a标签的作用，一定要与url搭配使用，如果没有url跳转后台就会报错。

• navigator跳转的页面一定是没有在tabBar里面定义过的页面，否则无法跳转。所以如果我们页面跳转有和tabBar页面重合的时候，我们就只能自定义tabBar了，写一个foot用fix样式固定在底部就可以了！

  
  navigator.png

• 为了不让用户在使用小程序时造成困扰，小程序规定页面路径只能是五层，请尽量避免多层级的交互方式。所以在页面navigator跳转的时候，可以加上redirect属性，即关闭当前页面，跳转到其它页面，可以减少页面的多层嵌套。

  
  redirect.png
• 因为小程序上传是有大小限制的，文件夹大小不能超过1M，所以小程序尽量不要用很多图片，如果图片很多可以将图片存放到服务器中，从服务器中调取图片，除去图片的文件大小一般不会超过1M的。还有一个办法就是合理的使用模板。公共的部分可以写成模板，在需要的地方调用即可

<!--定义模板-->
<template name="head">
  <view class="head">
    <image src="src"></image>
  </view>
</template>

<!--调用模板-->
<import src="../common/head.wxml" />
<view>
  <template is="head"></template>
</view>

• 微信客服功能contact-button，点击按钮可以跳转到微信客服的功能是小程序必不可少的，但是这个功能的logo图标是固定的，如果想换图标要怎么办呢。我采用的方法就是将固定插件设置opacity:0;，在此基础上进行自己样式的设置，可以多写几个插件将那一块填满。

<view>
              <contact-button style="opacity:0;" type="default-light" session-from="weapp" size="100"></contact-button>  
              <contact-button style="opacity:0;" type="default-light" session-from="weapp" size="100"></contact-button>  
              <view style="margin-top:-123%;">微信咨询</view>
        </view>

.foot .down > view:nth-child(2){
  background: url(url) center 35% no-repeat;
  background-size: 40%;  
} 

微信咨询.png