微信小程序开发笔记(一)

小程序包的大小不要超过2M

小程序MINA框架介绍 wxml wxss pages逻辑层js 介绍 绑定数据、绑定属性、条件判断、循环渲染数据

1. 快速创建页面，可以通过在app.json里面的pages里配置好路径即可自动创建。
2. 绑定数据：data-
3. 可以把view看做div，把text看做span
4. wx:for=""默认值为item，索引为index，也可以通过wx:for-item=“待指定”,wx:for-index="待指定"来指定。

微信小程序事件、方法、事件对象、方法传值、获取data数据、修改data数据、冒泡非冒泡事件

5. 触发方法：
   • 在生命周期函数里调用自己写的方法
   • 通过bindtap来绑定方法
6. 获取data中的数据this.data.键值
7. 改变data中的数据this.setData({data中的键: 待改变数据})
8. 事件对象： 可以通过事件对象获取绑定的数据-> e.currentTarget.dataset.绑定的名称.
9. 在view视图层执行方法传值，不能通过在绑定的方法后面括号里加参数，而是通过data-来绑定参数然后通过事件对象来获取。
10. 冒泡事件(bindTap)和非冒泡事件(catchTap)

微信小程序app.json配置视图样式、配置底部tab切换、页面跳转配置页面里面的.json文件

11. 底部菜单最少2个，最多5个，注意：要想显示出来tabBar那么需要参考如下链接https://blog.csdn.net/yexudengzhidao/article/details/89213215哈哈哈?
12. 页面跳转: wx.navigateTo()
13. 设置小按钮<button size=‘mini’><button>
14. tabBar可以居于底部也可以居于顶部

小程序页面跳转传值、请求Api接口获取服务器数据

15. 小程序中的跳转页面传值：
    • 在父页面中通过绑定data- ，然后在js文件中通过事件对象获取。
    • 然后在跳转子页面的URL上添加上参数 '../news/news?id='+id
    • 最后在子页面的的onLoad生命周期函数中通过options来获取
16. 一般移动端使用设计稿，注意事项：比如iPhone6的物理像素为375*667，但是设计稿一般为750*1334，因此：
    • 宽度自适应
    • 高度按照设计稿的一半
    • 在小程序中使用rpx 1rpx = 2px，因此按照设计稿的大小就好

小程序wxParse插件 解析html数据 【解析无人点餐系统菜品详情页面html】

17. https://github.com/icindy/wxParse

微信小程序中的模块化utils 以及全局app.js-- 配置无人点餐项目公共的api地址

18. 对模块化的理解：可以将一些公共的代码抽离成一个单独的js文件(一般建一个utils文件夹)，作为一个模块，模块里面的属性和方法默认是私有的，如果我们想在外部使用模块里面的属性和方法，在模块里面必须通过module.exports或exports暴露，暴露后可以通过require来引入。

微信小程序中的WXS 脚本语言的使用

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/01wxs-module.html

19. wxs文件也是对一些公共的方法进行封装，也是一个模块，但是他既可以在wxml中引用，又可以在wxs文件内引用。

微信小程序中的自定义组件、注册组件

20. 自定义组件：

    • 把公共的功能封装起来，方便其他使用。
    • 可以扩展html构建应用的不足。

21. 在根目录下新建components文件夹
    https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

微信小程序中的自定义组件、父子组件、组件事件、父子组件传值

22. 父子组件传值：
    • 父组件调用子组件的时候给子组件绑定数据
    • 在子组件的properties里面接收父组件传过来的数据
23. 组件上绑定事件和在内置组件上绑定组件一样，只不过组件上绑定的事件要写在methods对象内。