小程序开发入门操作

一、微信小程序是什么

1. 微信小程序是一种不需要下载安装即可使用的应用
2. 微信小是2017年1月9日，张小龙在2017微信公开课Pro上发布的微信小程序正式上线。

二、微信小程序商业价值

1. 依托微信，有强大广泛的用户基础，推广方便
2. 不用安装，即点即用，不用关闭，不占手机内存空间

三、微信小程序和普通H5的区别

1. 微信小程序没有DOM,BOM的API，只能使用EcmaScript核心 部分（数组，字符串方法，for,if…）
2. 微信小程序js逻辑和视图处理是分开独立运行的，性能比较好，而普通H5是单线程的，容易导致代码阻塞

四、微信小程序的帐号注册及开发流程

1. 微信小程序的注册

注册地址：https://mp.weixin.qq.com/wxopen/waregister?action=step1&token=&lang=zh_CN

按照连接地址给出的提示进行注册

2. 微信小程序登录：

https://mp.weixin.qq.com/


登录后：找到开发-开发管理-开发设置-开发者ID

AppID(小程序ID)	wxb61621e772a9f027

3. 开发和发布流程

开发->提交->审核->发布上线

五、小程序环境搭建与目录结构

1. 微信开发者工具的下载与安装

下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

六、手机运行测试

点击微信开发者工具--预览按钮（二维码预览和自动预览）

真机调试：通过开发者工具控制台来实时的高度真机上的项目

七、小程序如何实现tabBar导航

第一步：在app.json中添加tabBar配置属性
第二步：在tabBar的list属性中配置要添加的条目
  注意：最少配置2个，最多5个

tabBar参考文档：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar

配置tabBar具体演示代码：

{
  ....
  "tabBar": {
    "borderStyle":"white",  //tabBar是否有顶部边框
    "list": [  //配置tabBar的列表项数组
      {
        "text": "首页", //每项的名称
        "pagePath": "pages/index/index", //要打开的页面路径，跟pages项有关
        "iconPath": "/imgs/home.png",    //未选中的图标路径
        "selectedIconPath": "/imgs/home_active.png"  //选中的图标路径
      },
      {
        "text": "我的",
        "pagePath": "pages/logs/logs",
        "iconPath": "/imgs/my.png",
        "selectedIconPath": "/imgs/my_active.png"
      }
    ]
  },
  ....
}

八、wxml常用标签

1. view标签：是一个块级标签，相当于普通H5中的div
2. text标签：是一个行内标签 相当于span
3. button：按钮
4. block:是一种不会渲染到页面的标签  相当于vue中template标签,起到一个逻辑组织代码块的作用
5. image:插入图片

九、小程序常用指令

1. 程序的主入口和页面入口函数

   1. 主入口

   App({
   	方法,
   	初始化的数据对象
   })
   
   例如：
   App({
     onLaunch() {},
     globalData: {a:,b:2}
   })
   
   

   2. 页面入口

   page({
     data:{},
     方法1() {},
     方法2() {},
     方法3() {},
   })
   

2. 小程序的常用指令

(1)遍历：wx:for  相当于vue的v-for

  注意：
      默认的遍历每项用item表示
      默认的下标用index表示
      通过wx:for-index="自定义下标名称" 实现下标自定义
      通过wx:for-item="自定义每项名称"实现每项名称的自定义
      通过使用wx:for遍历时通常跟一个wx:key来提高遍历性能，通常wx:key用*this或遍历对象的唯一属性名表示

例如：
   <view class="item" wx:for="{{ list }}" wx:key="id">
             <text>商品名称：{{ index+1 }} 、 {{ item.name }}</text>
             <text>--商品价格： {{ item.price }}</text>
   </view>
  
(2)条件渲染：

  第一种：wx:if
   wx:if 相当于vue中的v-if
   wx:if 和wx:else
   
  第二种：hidden 相当于vue中的v-show的取反