学习微信小程序的同学分享一下微信小程序开发心得
相信很多人都用过微信。微信中有很多小程序功能。相信很多人都用过微信小程序，但是你了解微信小程序开发吗？最近有很多微信用户问我微信小程序开发的经验是什么？下面小编就带大家回顾一下您开发微信小程序的经历是怎样的？
微信小程序是介于原生App和H5之间的东西。如果你曾经使用cordova、Hbuiler、appCan等开发过混合App，那么微信小程序可能更接近这种方法。然而微信小程序依赖于微信开发平台，甚至连IDE都是专用的。成品只能通过搜索或扫描二维码在微信中找到，然后访问。这几天一直在尝试用微信小程序重写原来的H5项目。我有一些小感悟，怕时间长了就忘记了，所以就写下来作为备忘，也分享给想学习微信小程序的同学。
微信小程序是中国制造的，所以你不用担心文档看不懂或者被屏蔽，非常方便。官方的入门教程写得很简单，直接链接到。
如果你之前没有接触过微信小程序，可以按照我的步骤操作。
第一步是下载开发工具，以便您可以提高技能而不会错过任何机会。点击这里下载。这是一款用于开发微信小程序的IDE工具。它集预览、打包发布、调试、语法提示于一体。即便如此，我还是不习惯。我习惯在sublime中编辑代码，但是用它来进行代码调试。
安装很简单，我就不多说了。双击将其打开。如果提示扫码登录，请通过微信扫码授权，然后可以进行以下操作。
我现在只想体验一下，点击`无APP`，根据实际需要写项目名称，目录选择空目录。点击添加项目，结果如下：
单击编辑。左边是目录结构，中间是预览效果，右边是控制台。
如果选中，将生成示例代码。目录下有三个以app开头的文件和两个目录pages和utils。整个目录结构请参考框架官方介绍。以下是一些需要理解的知识点：
.js 是小程序的脚本代码，wxss 是样式，json 是配置信息。每次添加新页面时，都必须在app.json 中的页面项中添加新的配置。例如，添加“关于我们”：
'页面'：['页面/索引/索引'，'页面/日志/日志'，'页面/关于/关于'
//添加关于我们],
保存后会自动生成必要的文件和目录。接下来就是根据自己的业务进行相应的修改。注意，在微信小程序中，不能再使用jQuery/zetpo等工具。因为在微信小程序里
对于您创建的页面，全部以Page({}) 开头。如果你使用过Vue，请将其视为new Vue({})
调用方法。微信小程序的语法和思想与Vue很相似，或许可以参考它的方法。
页面({ 数据： { 座右铭： 'Hello World', userInfo{} }, onLoad函数{
//初始化}})
微信小程序的页面部分以.wxml结尾，只要认为是.html即可，但其语法与xml结构类似，且标签必须是自闭合的，如。在小程序中，具有固定用途的标签称为组件，例如视图容器组件、滑块组件、图标组件等。如果你用过React，你一定会感觉很熟悉。查看用法：
{{座右铭}}
组件的使用很简单，启动标签的中间内容区域
，元件应成对使用。如果是单个标签，请使用自动关闭形式。组件是通过添加属性来修改的，比如class、id、data-*等，这和html标签的用法是一致的。所有组件名称和属性名称均为小写，中间可以用“-”连接。 （React中的类应该写成className，并且组件的首字母要大写。这里没有这个限制），
图像组件的使用示例：
src是一个变量，以{{变量名}}的形式绑定。如果应用程序中的数据发生变化，视图将自动更新。
在样式中使用本地图像时要小心：
对于样式中的图片地址，如：background-image:url('./images/logo.png')
这是行不通的。打包后看不到图片。有两种解决方案：
1. 使用标签而不是样式。
2.使用绝对路径。如：http://img.server.com/logo.png
绑定事件，例如点击事件：
bindtap是固定的写法，相当于onclick，bindViewTap就是事件所做的事情。相当于onclick=bindViewTap，但和HTML中直接绑定略有不同。这里使用的bindtap是虚拟绑定，最终是通过事件代理来调度的，所以事件对象也是一个二次封装的对象。这与React 中的事件绑定用法相同。
在视图上绑定事件类型和方法名后，在页面中添加相应的事件函数（如index）。例如：
Page({ data{ motto'Hello World', userInfo{} }, //事件处理函数
绑定视图点击：
函数{ wx.navigateTo({ url'./logs/logs' }) }
变量循环：wx:for
使用块控制标签来组织页面中的代码，在块上使用wx:for绑定循环数据，循环循环体数据来展开节点。
{{item}} //item数组成员
页面跳转：wx.navigateTo
wx.navigateTo({ url'./about/about' })
插件API：
依靠插件，微信小程序可以使用原生APP才有的功能。详细信息请参见官方插件列表。下面以调用相机和相册为例介绍该插件的使用方法：
wx.chooseImage
首页给页面绑定了点击事件：
页面/about/about.wxml
然后在about.js中添加事件函数
//pages/about/about.jsPage({ data:{}, onLoad:function(options){ //
页面初始化
options 为页面跳转时带入的参数}, onReady:function{ //页面渲染完成}, onShow:function{ //
页面显示},
onHide:function{ //页面隐藏}, onUnload:function{ //页面关闭},
绑定事件：函数（e）{
wx.chooseImage({ count1, //默认9 sizeType['原始', '压缩'],
//
您可以指定是原始图像还是压缩图像。默认情况下，两者都可用sourceType['album', 'camera'], //
您可以指定来源是相册还是相机，默认情况下都包含。
成功：函数（res）{//
返回所选照片的本地文件路径列表。 tempFilePath 可用于将图像var 显示为img 标签的src 属性。
tempFilePaths=res.tempFilePaths } }) }})
预览：
单击IDE工具左侧的“Project”。如果您有AppID，可以上传并通过手机微信查看。
其他：
微信小程序和传统的开发方式有很多区别。需要多关注官方的FQ，避免不必要的陷阱。
以上是小编为您整理的内容。你知道自己开发微信小程序有哪些经验吗？希望小编的内容对您有所帮助。
