微信小程序实战--查成语

小程序

一、 代码结构

1. .json后缀的json配置文件
2. .wxml后缀的是wxml模板文件
3. .wxss后缀的wxss样式文件
4. .js后缀的js脚本逻辑文件

二、 json配置文件

1. app.json是对小程序的全局配置，包括页面路径pages、所有页面顶部背景色文字色window、网络超时时间networkTimeout等，具体可查看官网·配置页
2. project.config.json对整个项目的配置及编辑器的配置，具体可查看官网·项目配置文件
3. [page].json表示某个页面下如pages/logs登录页面的logs.json，自定义每个页面的属性，如顶部颜色等。页面中的配置项会覆盖app.json的window中相同的配置项，具体查看page.json

三、 动态设置标题

在onload函数中使用wx.setNavigationBarTitle动态设置标题

onLoad: function () {
    wx.request({
      url: `${prefix}chengyu/detail`,
      method: 'GET',
      data: {
         chengyu: '积少成多' ,
         appkey: appkey,
      },
      success: function({ data }) {
        self.setData({
          info: data.result,
        });
         wx.setNavigationBarTitle({
            title: data.result.name,
         })
      },
      fail: function (msg) {
        console.log(msg)
      }
    })
},

四、 使用weui中的searchbar

• 下载weui，拷贝/dist/example/searchbar整个文件夹到项目的components文件夹下。
• 添加search.json文件，将searchbar作为项目的组件，这样其他页面就可以使用了

{
  "component": true,
  "usingComponents": {}
}

• 将searchbar.js中第一行的Page换成Component

• 将把/dist/style/weui.wxss文件放到项目的根目录（或者其他目录）。在searchbar.wxss文件中导入@import "../../../weui.wxss";

• 在页面中引用组件，需要在页面的[page].json文件中添加usingComponents属性。

<!--index.json-->
{
  "usingComponents": {
    "searchbar": "../components/searchbar/searchbar"
  },
}

• 在页面中引用组件,还需要在[page].wxml文件中使用该组件。

<!--index.wxml-->
<view class="container">
  <searchbar ></searchbar>
</view>

demo地址，喜欢就给个star吧

可以在微信小程序中搜索“查成语”查看详细功能

查成语--小程序

五、 组件传递布尔属性值
组件属性定义
select.js

Component({
  properties: {
    verified: {
      type: Boolean,
      value: false,
    }
  },
....

引用组件时，传递布尔属性值

• 传递了verified= true

<select verified />    

• 传递verified= false

<select />     

六、 自定义组件监听事件，传递事件消息

1. 自定义组件触发事件使用triggerEvent传递消息:
   select.js

Component({
...
  methods: {
    handleUpload: function () {
       let detail = { }; 
       this.triggerEvent('onUpload', detail);
    }
  }
});

其中detail是 打算传递给调用组件方的数据
this.triggerEvent('onUpload', detail) 调用组件方，触发onUpload时能拿到数据

2. 调用组件方

<select bind:onUpload="getUpload" />  

自定义组件触发onUpload事件时，调用getUpload方法

Page({
 ...
  getUpload: function (e) {
    const value = e.detail;
    console.log(value)
  }
})

组件间事件通信