小程序文档整理，入门这一篇就够了

作者: spxs339 | 来源:发表于2019-06-12 16:07 被阅读0次

小程序文档整理，入门这一篇就够了
pymongo中的特殊查询
Kotlin相关
《微信小程序开发入门与实践》知识点整理
微信小程序案例最全整理
Docker资料整理-1基础入门篇
Webpack新手入门只要一篇
Hibernate入门这一篇就够了
Git【入门】这一篇就够了
小程序进阶（1）豆瓣电影_布局搭建

准备工作

准备一个账号账号注册地址

下载小程序开发者工具开发者工具下载地址

小程序官方文档文档地址

小程序官方实例包含大部分组件和API的调用源码地址

小程序的构成

小程序的主题部分由三个文件组成，必须放在项目的根目录
| 文件 | 必需 | 作用 |
| :-------- | --------:| :--: |
| app.js | 是 | 小程序逻辑 |
| app.json | 是 | 小程序公共配置 |
| app.wxss | 否 | 小程序公共样式表 |
app.js: 每个小程序都需要在 app.js中调用App方法注册小程序实例，App() 必需在app.js中使用且只能使用一次。
app.js中生命周期函数实例代码

App({
  onLaunch (options) {
    // 监听小程序的初始化，全局只触发一次
  },
  onShow (options) {
    // 监听小程序启动或切前台。
  },
  onHide () {
    // 监听小程序从前台进入后台时触发。
  },
  onError (msg) {
    //小程序发生脚本错误或 API 调用报错时触发
  }
})

app.json 小程序根目录下的app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

{
  "pages": [
  //页面路由
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo", //导航栏标题文字内容
    "navigationBarBackgroundColor":"#000000", //导航栏背景颜色
    "navigationBarTextStyle":"white", //导航栏标题颜色，仅支持 black / white
    "backgroundColor":"#ffffff", //窗口的背景色
    "backgroundColorTop":"#ffffff", //顶部窗口的背景色，仅 iOS 支持
    "backgroundColorBottom":"#ffffff", //底部窗口的背景色，仅 iOS 支持
  },
  "tabBar": {
  //底部导航设计
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },
  //网络请求超时时间
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true,//开启debug模式
}

小程序的页面由四个文件组成
| 文件 | 必需 | 作用 |
| :-------- | --------:| :--: |
| js | 是 | 页面逻辑 |
| wxml | 是 | 页面结构 |
| json | 否 | 页面配置 |
| wxss | 否 | 页面样式表 |

语法功能介绍

wxml功能介绍
@(数据绑定)[简单绑定,组件属性,控制属性,关键字,三元运算,列表渲染,条件渲染]

简单绑定

数据绑定使用双大括号将变量包起来，然后再js中data中使用,如：

<view> {{ message }} </view>
Page({
  data: {
    message: 'Hello world!'
  }
})

组件属性(需要写在双引号内)

<view id="item-{{id}}"> </view>
Page({
  data: {
    id: 0
  }
})

控制属性(需要在双引号之内)

<view wx:if="{{condition}}"> </view>
Page({
  data: {
    condition: true
  }
})

关键字(需要在双引号之内)

true：boolean 类型的 true，代表真值。
false： boolean 类型的 false，代表假值。

<checkbox checked="{{false}}"> </checkbox>

特别注意：不要直接写checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。

列表渲染 wx:for

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index数组当前项的变量名默认为 item

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

使用 wx:for-item 可以指定数组当前元素的变量名，
使用 wx:for-index 可以指定数组当前下标的变量名：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

条件渲染 wx:if

在框架中，使用 wx:if=""来判断是否需要渲染该代码块：

<view wx:if="{{condition}}"> True </view>

也可以用 wx:elif 和 wx:else 来添加一个 else 块：

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个<block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

注意： <block/>并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

模块化开发

@(require)[module,exports]

require(string path) 用于引入模块 path 放入需要引入的模块文件的相对路径，或者npm模块名，或者npm模块路径。不支持绝对路径
module.exports或者exports 用于对外暴露接口
实例代码

// common.js
function sayHello(name) {
  console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
  console.log(`Goodbye ${name} !`)
}

module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye

// index.js
var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('hello')
  },
  goodbyeMINA: function() {
    common.sayGoodbye('goodbye')
  }
})

网络请求

wx:request 发起https网络请求
| 属性 | 类型 | 默认值 | 必填 | 说明 |
| :-------- | --------:| :--: | :--: | :--: |
| url | string | | 是 | 开发者服务器接口地址|
| data | string/object/ArrayBuffer | | 否 | 请求参数 |
| header | Object | GET | 否 | 设置请求的 header，header 中不能设置 Referer,content-type 默认为 application/json|
| method | string | json | 否 | HTTP请求方法 |
|dataType | string | text | 否 | 返回数据格式|
|responseType| string | text | 否 | 响应的数据类型 |
|success | function| | 否 | 接口调用成功的回调函数|
|fail | function| | 否 | 接口调用失败的回调函数|
|complete| function| | 否 | 接口调用结束的回调函数(成功失败都会执行)|
methods的合法值
@(OPTIONS)[GET,POST,HEAD,PUT,DELETE,TRACE,CONNECT]

wx.request({
  url: 'xxx.php', 
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

路由跳转

wx.navigateTo

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

wx.navigateTo({
    url:'页面的路由',
    //跳转的页面不能为tabbar, 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 'path?key=value&key2=value2'
    succrss:function(res){
    //成功的回调
    },
    fail:function(res){
    //失败的回调
    }
})

父子组件通信

创建组件

右键新建 Component,创建组件，和正常创建page类似，创建名为child1的组件，如下:

默认组件的js文件：

// component/child1/child1.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
  },
  /**
   * 组件的初始数据
   */
  data: {
    paramsOne:String
  },
  /**
   * 组件的方法列表
   */
  methods: {
  }
})

在你需要引入的页面的json文件中引入，child1是自定义的标签名，后面跟着路径，一定要写在usingComponents中

{
  "usingComponents": {
    "child1": "../../component/child1/child1"
  },
  "navigationBarTitleText": "详情"
}

在要引入的页面wxml中，用你自定义的标签名<child1 />就可以引入了

<view>
    <child1 />
</view>

父子组件传值--------------父向子传值

创建child2组件，在child1中按上述方法引入
声明:child1为父组件，child2为子组件

<!--component/child1/child1.wxml-->
<view>
    <text>child1组件</text>
    <child2 paramsTwo="从父组件传入子组件的数据" /> 
    <!--这是child2组件-->
    <!--paramsTwo是自定义的参数，用来绑定当前的数据，传入子组件-->
</view>

<!--component/child2/child2.wxml-->
<text>{{paramsTwo}}</text>

// component/child2/child2.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
  /**子组件设置参数接收，参数名与child1中的<child2 paramsTwo=""/>标签参数一致**/
    paramsTwo: String
  },
})

父子组件传值--------------子向父传值

声明:child1为父组件，child2为子组件
要让子组件给父组件传参，首先得在父组件引入子组件的时候，在父组件中加个触发事件，如下：

<!--component/child1/child1.wxml-->
<view>
    <view>接收子组件传来的数据：{{paramsOne}}</view>
    <child2 paramsTwo="从父组件传入子组件的数据" bind:myEvent="onMyEvent" />
</view>

myEvent就是绑定的触发事件,paramsOne是接收子组件的变量，写在js文件的data中即可，然后时间触发时候执行 onMyEvent()方法，在onMyEvent()方法中把子组件传来的值赋值给 paramsOne,如下：

// component/child1/child1.js
Component({
  properties: {
  },
  data: {
    paramsOne:String,
  },
  methods: {
    onMyEvent:function(e){
      this.setData({
        paramsOne: e.detail.paramsOne
      })
    }
  }
})

子组件里面可以写个触发事件来触发父组件中的myEvent，比如写个button在按钮点击的时候通过 triggerEvent方法将事件和值代入父组件，如下：

<!--component/child2/child2.wxml-->
<button bindtap='change'>向child1中传入参数</button>

// component/child2/child2.js
Component({
  methods: {
    change:function(){
      this.triggerEvent('myEvent', { paramsOne:'123'})
    }
  }
})

triggerEvent在点击之后被触发，将myEvent事件和参数传入父组件，在父组件中，通过bind绑定的myEvent被激活后开始执行父组件中的onMyEvent方法。onMyEvent通过打印e.detail.paramsOne就能拿到子组件中的值，然后通过this.setData({})把接收的值赋值给父组件中的变量，子父组件通信完成。

ps: 触发事件 ----`triggerEvent` 内容补充

自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项实例代码：

<!-- 在自定义组件中 -->
<button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>

Component({
  properties: {},
  methods: {
    onTap: function(){
      var myEventDetail = {} // detail对象，提供给事件监听函数
      var myEventOption = {} // 触发事件的选项
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    }
  }
})

小程序文档整理，入门这一篇就够了
准备工作准备一个账号账号注册地址下载小程序开发者工具开发者工具下载地址小程序官方文档文档地址...
pymongo中的特殊查询
python操作mongo常用的增删改查看这一篇就够了Python操作MongoDB看这一篇就够了最近在整理一些...
Kotlin相关
------入门------Kotlin 资源大全 - 学 Kotlin 看这一篇教程就够了Kotlin编程Kot...
《微信小程序开发入门与实践》知识点整理
《微信小程序开发入门与实践》简介最近有看完这本书，闲来无事整理个文档。整理完成日期：2019/02/27。...
微信小程序案例最全整理
本文整理了微信小程序开发当中的一些开源Demo，供开发者学习研究，适合入门以及初学开发者相关工具小程序开发文档...
Docker资料整理-1基础入门篇
参阅文献Ubuntu18.04 安装Docker关于 Docker 入门，这一篇就够了--今日头条--推荐Dock...
Webpack新手入门只要一篇
学习流程参考文档:入门Webpack，看这篇就够了Webpack for React 一. 简单使用webpac...
Hibernate入门这一篇就够了
前言本博文主要讲解介绍Hibernate框架，ORM的概念和Hibernate入门，相信你们看了就会使用Hibe...
Git【入门】这一篇就够了
前言欢迎关注公众号，白嫖原创PDF，也可以催更，微信搜：JavaPub，回复：【666】 Git 在生产工作中是...
小程序进阶（1）豆瓣电影_布局搭建
-（Ctrl+s）保存编辑的内容，不然调试不会出效果！！！小程序入门（0）项目创建篇小程序入门（1）项目结构篇...