奋斗的小小小兔子
奋斗的小小小兔子

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

小程序

一、 代码结构

  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属性。


{
  "usingComponents": {
    "searchbar": "../components/searchbar/searchbar"
  },
}
  • 在页面中引用组件,还需要在[page].wxml文件中使用该组件。

demo地址，喜欢就给个star吧

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


查成语--小程序

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

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

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

  • 传递了verified= true

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

  1. 自定义组件触发事件使用triggerEvent传递消息:
    select.js 
Component({
...
  methods: {
    handleUpload: function () {
       let detail = { }; 
       this.triggerEvent('onUpload', detail);
    }
  }
});

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

  1. 调用组件方