微信开发工具(小程序)

一、小程序是什么

        小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

二、小程序的发展史

               1. 随着微信越来越流行，微信逐渐成为移动互联网中一个主要的入口。

              2.微信基于WebView实现了前端界面的渲染，为了丰富微信中H5页面的功能，微信提供了

JS-SDK。

              3.JS-SDK 解决了移动网页能力不足的问题，通过暴露微信的接口使得 Web 开发者能够拥有更多的能力，然而在更多的能力之外，JS-SDK 的模式并没有解决使用移动网页遇到的体验不良的问题。

                        1.用户在访问网页的时候，在浏览器开始显示之前都会有一个的白屏过程，

                           在移动端，受限于设备性能和网络速度，白屏会更加明显。

                        2.除了白屏，影响 Web 体验的问题还有缺少操作的反馈，主要表现在两个

                           方面：页面切换的生硬和点击的迟滞感。

三、微信小程序的优势和劣势

优势

        1.微信助理，容易推广。在微信中，小程序拥有众多入口，例如附近的小程序、小程序码、分享、发现-小程序等五十多个的入口。这些入口有助于企业更好的获取流量，从而进行转化、变现。

        2.使用便捷。用户在使用小程序时，只需要轻轻点一下就可以使用，更加符合用户对使用方便、快捷的需求，所以小程序的用户数量不断增加。

        3.体验良好，有接近原生app的体验。在微信生态里，小程序在功能和体验上是可以秒杀掉 H5 页面的，H5 页面经常出现卡顿、延时、加载慢、权限不足等原因，而这些问题在小程序里都不会出现。

        4.成本更低，从开发成本到运营推广成本，小程序的花费仅为APP的十分之一，无论是对创业者还是传统商家来说都是一大优势。

劣势

        1.单个包大小限制为2M，这导致无法开发大型的应用，采用分包最大是16M（这个值一直在变化，以官网为准）。

        2.需要像app一样审核上架，这点相对于H5的发布要麻烦一些。

        3.处处受微信限制。例如不能直接分享到朋友圈，涉及到积分，或者虚拟交易的时候，小程序也是不允许的。

三、官方文档

微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/framework/

四、项目目录结构

                wxml：编写小程序界面结构的地方

                wxss：编写小程序样式的地方

                json：编写界面配置的地方

                js：编写界面逻辑的地方

                utils：编写工具类的地方

                app.js：创建程序实例的位置

                app.json：编写全局样式的地方

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

                sitemap.json：配置哪些网站可以被检索到

五、数据绑定

                数据定义

                

 data: {
msg:"hello world",
num: 18,
  },

                引用数据

                        通过{ {}}的方式可以引用数据。

                 除了引用数据之外，这里还可以进行一些计算，最终显示的结果是计算之后得到的结果

<view>{
  {msg}},{
  {num + 10}}</view>

                小程序中任何需要获取数据的地方都需要用{ {}},包括标签内的属性。

                逻辑渲染

                        WXML中，使用wx：if"{ {condition}}"来判断是否需要渲染该代码块：

<view wx:if="{
  {condition}}"> True </view>

                        使用wx：elif 和 wx：else 来添加一个 else 块：

<view wx:if="{
  {length > 5}}"> 1 </view>
<view wx:elif="{
  {length > 2}}"> 2 </view>
<view wx:else> 3 </view>

                        因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性

                  判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在