[开发工具]微信小程序学习

一、环境准备

?

? ? ? ? 1、注册一个微信小程序帐号

? ? ? ?????????https://mp.weixin.qq.com/wxopen/waregister?action=step1

? ? ? ? ? ? ? ? 注册完成后申请一个AppId，前期开发也可以不申请，使用测试id，测试id一些支付等功能不能使用，程序后期可修改AppId

? ? ? ? 2、下载微信小程序开发工具

????????????????https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html????????

????????3、小程序创建

? ? ? ? ????????打开开发工具通过项目新建小程序，填写名称，小程序id等基础信息后即可新建

二、小程序目录结构

????????

?

三、小程序全局配置（app.json）

? ? ? ? ?

{
    "pages":[
        "pages/index/index",
        "pages/logs/logs"
    ],
    "window":{ // 更多属性请查阅https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html#%E9%85%8D%E7%BD%AE%E9%A1%B9
        "backgroundTextStyle":"light",  // 下拉 loading 的样式，仅支持 dark / light
        "enablePullDownRefresh": true,  // 是否开启全局的下拉刷新
        "navigationBarBackgroundColor": "#fff",  // 导航栏背景色
        "navigationBarTitleText": "Weixin",  // 导航栏文字内容
        "navigationBarTextStyle":"black"  // 导航栏的字体颜色
    },
    "tabBar": {
        "color": "#999",
        "selectedColor": "#ff2d4a",
        "backgroundColor": "",
        "position": "bottom",
        "borderStyle": "black",
        "list": [
            {
                "pagePath": "pages/index/index",
                "text": "首页",
                "iconPath": "./icons/home.png",
                "selectedIconPath": "./icons/home-o.png"
            },
            {
                "pagePath": "pages/category/category",
                "text": "分类",
                "iconPath": "./icons/category.png",
                "selectedIconPath": "./icons/category-o.png"
            },
            {
                "pagePath": "pages/cart/cart",
                "text": "购物车",
                "iconPath": "./icons/cart.png",
                "selectedIconPath": "./icons/cart-o.png"
            },
            {
                "pagePath": "pages/user/user",
                "text": "我的",
                "iconPath": "./icons/my.png",
                "selectedIconPath": "./icons/my-o.png"
            }
        ]
    }
}

四、父子组件传值

1、创建组件

????????打开微信开发者工具，创建组件，会生成四个文件：wxml,wxss,js,json；我们可以看到js和json中的代码与page不同

// js文件中的代码
Component({
  /**
   * 组件的初始数据
   */
  data: {
  },

  /**
   * 组件的方法列表
   */
  methods: {
  }
})

// json中的代码
{
  "component": true,
  "usingComponents": {}
}

2、引入组件

? ? ? ??在父组件的json中引入：

{
  "usingComponents": {
    "componentA": "../../components/child1/child1"
  }
}

? ? ? ? 在wxml中的使用

<view>
    <componentA />
</view>

3、父传子

? ? ? ? 在父组件的wxml中使用时

<view>
   <view>子组件内容：</view>
   <componentA param='我是子组件中传入的参数'/>
</view>

? ? ? ? 子组件在对应的js文件中通过properties接收

Component({
  properties: {
    param: {
      type: String,
      value: '111111' // 默认值
    }
  },

})

4、子传父

要让子组件给父组件传参，首先得在父组件引入子组件的时候，加个触发事件，如下：

 <componentA param='我是传入的参数' bind:myevent="onMyEvent"/>

并在父组件的js中添加对应的onMyEvent方法：

methods: {
  onMyEvent:function(e){
    this.setData({
      param: e.detail.param
    })
  }
}

最后在子组件的js中通过triggerEvent调用父组件的onMyEvent方法

 this.triggerEvent('myevent', { param:123});