微信小程序入门

认识项目结构

cloudfunctions 云函数
miniprogram 小程序
miniprogram_npm 是项目所需要的依赖，node_module 是本地依赖。用npm install 安装完本地依赖，需要使用小程序ide 工具 –> 构建npm 进行构建后才能供小程序使用。

微信官方文档，虽然文档我感觉并不适合入门，但是还是比很多资料都要好点，不建议全看完才进行开发。弄懂一些概念即可。

大致有四种文件， js 逻辑， json, 配置， wxml，类比html 结构， wxss，类比 css。
全局的是app, app.js, 定义全局的函数， app.json 定义全局的配置。
局部的是page, component。 , 有个 data 字段，页面的初始数据，至于页面的生命周期函数，需要的时候再详细看文档即可。

组件

官方简单例子

组件用properties，调用者需要在json 中定义才能使用。
如果是调用频率高的组件，可以考虑在 app.json中定义。
component 官方自定义组件

// 组件的 properties
 properties: {
    propA: String,
    propB: String
},
// 页面的 data
data: {
    dataFieldA: '123',
    dataFieldB: '456'
},

<!-- page -->

<view>
  <my-component prop-a="{{dataFieldA}}" prop-b="{{dataFieldB}}"></my-component>
</view>
<!-- component -->
<view class="wrapper">
  <view>这里是组件的内部节点</view>
  <text>propA: {{propA}}</text>
  <text>propB: {{propB}}</text>
</view>

page的json

1	"my-component": "/components/component-tag-name"

外部样式类

在使用一些组件库的时候可能会用到，需要了解

组件间通信与事件

官方文档

注意点

可能会出现的错误，

组件定义函数时，需要定义 method字段中。

WXML

数据绑定
条件, wx:if
列表渲染, wx:for, 列表渲染，需要注意的是，当遍历的是一个数组的时候，wx:key 等于 *this
模板，相比于组件，我觉得模板更轻量级，更适合复用一些只是用来显示的结构, 这篇比官方详细很多。掘金文章—模板
view, text, image scroll-view 标签
原生表单标签 form input

wxss
略

事件

官方文档

注意点

bindtap 和 bind:tap 两种写法都可以
bind 和 catch 的异同
target 和 currentTarget,detail

路由

wx.navigateTo

官方文档
 EventChannel
EventChannel-社区文章

注意点

wx.navigateTo 的 url 字段url:'/pages/category/category'

Hexo

记录学习微信小程序遇到的问题和解决方案