微信小程序入门

文件类型

• .wxml：微信模板文件，类似网页开发的html文件。
• .wxss：微信样式表文件，用于定于页面样式。
• .js：脚本文件，代码逻辑写在这。
• .json：静态数据配置文件。

文件

官方文档：官方文档

app.json—小程序全局配置文件

  "pages":[ // 页面路径列表
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{ // 全局的默认窗口表现
    "backgroundTextStyle":"light", // 背景文本样式 可选light dark
    "navigationBarBackgroundColor": "#fff", // 导航背景色，可定义任意颜色
    "navigationBarTitleText": "WeChat", // 导航标题，可定义任意文本
    "navigationBarTextStyle":"black" // 导航文本颜色，可选black white
  }

字段介绍：
pages:用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。新增/减少页面，都需要对 pages 数组进行修改.
windows：用于设置所有页面的状态栏、导航条、标题、窗口背景色等。这是一个全局的配置，修改之后所有页面都会生效，在单个页面json配置中定义独特的风格可以覆盖全局配置。
其他字段：（可以在官网查看各个参数的详细的使用方式）

app.js

• data:{} ：页面的初始数据
• onLoad: function (){}： 监听页面加载，一个页面只会调用一次。
• onShow：监听页面显示，每次打开页面都会调用一次。
• onReady：监听页面初次渲染完成，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
• onHide：监听页面隐藏，当navigateTo或底部tab切换时调用。
• onUnload：监听页面卸载，当redirectTo或navigateBack的时候调用。
• onPullDownRefresh：用户下拉动作的处理函数
• onReachBottom：页面上拉触底事件的处理函数
• onShareAppMessage：用户点击右上角分享时的处理函数

边开发边自学

设置组件view的样式

在index.wxml文件中设置class：

<view>
  <view class = "top-title">
  </view>
</view>

然后在对应的index.js文件中设置样式：

.top-title {
	...
}

在样式中设置居中

.top-title {
	height: 30px;
  	display: flex;
  	justify-content:center;
  	align-items:center;
}

绑定事件bindtap的使用

• 不带参数的绑定
  index.wxml文件中设置：

<view bindtap='share'>事件</view>

index.js文件中：

share(){
    console.log('执行啦~~~')
}

这样在页面中点击这个组件就会执行share函数啦~

• 带参数的绑定
  index.wxml文件中设置：

<view bindtap='share' data-id="{{id}}">事件</view>

index.js文件中：

share(e){
    console.log('执行啦~~~')
}

小程序编译指定的页面

点击一个组件显示或者隐藏另一个组件

在一个组件中设置visibility属性，点击另一个组件时，利用事件修改这个属性

<button bindtap="selectAddress">点我点我</button>
<view style="visibility:{{addressMenuIsShow ? 'visible':'hidden'}}">我显示啦~~~</view>

data: {
  addressMenuIsShow: false,
 },
 selectAddress:function(){
  var that = this
  that.setData({addressMenuIsShow: (!that.data.addressMenuIsShow)})
 },

结果：点击button会显示view

picker-view的使用

<view class="picker-view" style="visibility:{{timeMenuIsShow ? 'visible':'hidden'}}">
 <view style="height:10% ;width:95%;margin-top:10rpx">
  <text catchtap="timeCancel">取消</text>
  <text style="float: right" catchtap="timeSure">确定</text>
 </view>
 <picker-view style="width: 100%; height: 300px;" bindchange="timeChange" value="{{timeIndex}}" wx:key="">
  <picker-view-column>
   <view wx:for="{{times}}" class="picker-item">
    {{item}}</view>
  </picker-view-column>
 </picker-view>
</view>

Page({
 data: {
  timeMenuIsShow:false,
  timeIndex:[0],
 },
  selectTime:function(){
  var that = this
  that.setData({timeMenuIsShow: (!that.data.timeMenuIsShow)})
 },
  timeChange: function (e) {
  var index = e.detail.value[0]
  // 如果选择项和之前不一样，表示滑动了
  if (this.data.timeIndex[0] != index) {
    this.setData({timeIndex:[index]})
  }
 },
 })

注意

• 点击按钮修改数组中某个元素的值时，要加引号''！

  that.setData({
    'array[1]' : 10
  })

遇到的问题总结：

调试时出现以下信息：请使用2.12.0及以上基础库版本

解决办法：
点击右上角详情，设置调试基础库即可解决。

给view使用bindtap加了事件，但是点击view没有反应

解决办法：修改z-index层级
参考链接：https://www.jianshu.com/p/8da52621c4f5