投稿
  1. 首页
  2. python

微信开发工具

code • 2022-4-25 • python • 阅读 28

微信开发工具,第1张

一、小程序是什么

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

二、小程序的发展史

               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,
  },

                引用数据

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

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

{{msg}},{{num + 10}}

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

                逻辑渲染

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

 True

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

 1 
 2 
 3

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

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

                  上边使用 wx:if 控制属性。


   view1 
   view2

                        还可以通过hidden属性进行条件渲染。wx:if在不满足条件的时候

                  会删除掉对应的DOM，hidden属性则是通过display属性设置为none

                  来进行条件渲染。

                列表渲染

                        在组件上使用wx：for控制属性绑定一个数组，即可以使用数组中各

                  项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index

                  ，数组当前项的变量名默认为item。



  {{index}}: {{item.name}}

                        使用wx：for-item 指定数组当前元素的变量名，使用wx：for-index

                  指定数组当前下标的变量名。


  {{idx}}: {{itemName.name}}

六、Key

                        列表中的项目保持自己的特征和状态，需要使用 wx:key 来指定

                  列表中项目的唯一的标识符。

                wx:key 的值以两种形式提供：

                        1.字符串，代表在for循环的array中item的某个property，该property

                  的值需要是列表中唯一的字符串或数字，且不能动态改变。

                        2.保留关键字this代表在for循环中的item本身，这种表示需要item本身

                  是一个唯一的字符串或者数字

                        带有key的组件。框架会让他们重新排序，而不是重新创建。以确保使

                  组件保持自身的状态，提高列表渲染的效率。

                Template

                        WXML提供模板（template），可以在模板定义代码，在不同地方调用

                  。使用name属性，作为模板的名字。然后在