微信小程序开发

作者: taijielan | 来源:发表于2020-02-20 10:52 被阅读0次

优点

无需安装。
随处可见，随处使用。
使用完，无需写在卸载。

小程序的申请地址。

https://mp.weixin.qq.com

安装微信小程序工具

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

小程序的目录结构

app.js（小程序的主要逻辑）
app.json （小程序全局的公共配置）
app.wxss （小程序全局的公共样式表）

页面的覆盖掉全局的配置

新建页面的步骤

在pages目录下，右键新建目录，在当前新建的目录下，新建page框架。
在app.json的pages选项中添加新建页面的路径。

小程序的生命周期，以及页面的生命周期

*小程序生命周期：
https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html
App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

onLaunch全局只会触发一次。

*页面生命周期：
https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log("onload")
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    console.log("onReady")

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

    console.log("onShow")

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    onsole.log("onHide")
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    onsole.log("onUnload")
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

onLoad，onReady 只会渲染一次。

小程序的尺寸单位：“rpx”

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html

flex 布局

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

数据绑定

mustache语法：{{}}
单向数据绑定

动态数据绑定

小程序的赋值通过this.setData(对象)

var apiData  = {
      textStr:"sever data",
      name:"jack"
    };
    
    this.setData(apiData);

获取data的值
this.data.key 值

小程序的条件渲染

wx:if为true显示元素，为false就不显示元素。

<view style="text-align: center">考试成绩</view>
<view>{{score}}</view>
<view wx:if = "{{score>60}}"> 及格</view>
<view wx:elif="{{score>90}}">优秀</view>
<view wx:else>良好</view>
<view wx:if = "{{score != ''}}">不为空</view>

小程序的列表渲染

https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html

wx:for 绑定数组，wx:for-item值为当前变量名，wx:for-index当前下标的变量名。

<block wx:for = "{{apiData}}" wx:for-item = "item">
<view class="item">
    <view class="item_image">
    <image src ="{{item.url}}" ></image>
    </view>
    <view class = "item_name"
  >{{item.name}}
  </view>
    </view>
    

</block>

小程序事件绑定和事件交互

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

bind+事件方法
需要在js中写对应的方法

<view>
  {{changeText}}
</view>
<button bindtap="changetext" bindlongtap="longtap">
  改变文字
</button>
--------------------------
data: {
      // textStr:"hello word11 "
    // score:90
    datalist:[],
    changeText:"hello  hundun"
  },
  changetext:function(){
    // console.log(1)
    this.setData({
      changeText:" ni hao ya "
    })
  },
  longtap:function(){
    console.log("longtap")
  },

小程序事件机制 catch和bind

bind 会用到冒泡的机制，catch会阻止事件的冒泡。
捕获阶段的bind 和catch

<view class="container" bindtap="containertap">
      <text class="text" catchtap="texttap">点击</text>
</view>

capture-bind:tap(捕获事件)
capture-catch:tap（捕获事件）

<view class="container" bindtap="containertap" capture-bind:tap = "captruecontainer">
  <text class="text"  bindtap="texttap" capture-bind:tap = "captruetext">点击</text>

</view>

捕获事件先于绑定事件。从外层到内层捕获，从内层到外层绑定。

小程序的基础组件和常用组件

https://developers.weixin.qq.com/miniprogram/dev/component/icon.html

icon
progress
rich-text
text

 <icon type = "search" size = "200" color = "red"></icon>
  <progress percent="50" show-info ="false" stroke-width = "20"
  
  active = "true"> </progress>

  <text selectable="true">hahha </text>

  <rich-text nodes = "{{textrich}}" ></rich-text>

小程序的表单组件

https://developers.weixin.qq.com/miniprogram/dev/component/input.html

input
checkbox
checkbox-group
button
form

<form bindsubmit="bindsubmitform" bindreset="bindrestform">
<input name  ="input" placeholder="请输入" bindinput="inputfuc">

</input>

<button  name  = "button" type="warn" plain="false" loading="false"> 按钮</button>


<view>
  <checkbox-group name = "checkbox-group" bindchange = "onchangecheck">
    <label>
      <checkbox value="java">
        java
      </checkbox>
    </label>

    <label>
      <checkbox value="c++">
        c++
      </checkbox>
    </label>

    <label>
      <checkbox value="c">
        c
      </checkbox>
    </label>
  </checkbox-group>
</view>
<button form-type="submit"> 提交 </button>
<button form-type="reset">重置 </button>

</form>

画布

https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html

swiper

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

<swiper indicator-dots="{{indicator}}"  autoplay="{{autoplay}}" previous-margin ="{{previous}}">
  <block wx:for="{{imagesss}}" wx:key ="*this">
    <swiper-item>
    <image src="{{item}}" class = "swiper-item"></image>
      </swiper-item>
  </block>

</swiper>

特殊的覆盖组件

https://developers.weixin.qq.com/miniprogram/dev/component/cover-image.html
https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html

<map>
    <cover-view class="coverdata">
    hhhh
    </cover-view>
</map >

小程序页面导航组件

https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
<navigator url = "/pages/sort/sort" hover-class="navigator-hover" open-type="reLaunch"> 跳转到分类页面</navigator>

小程序常用路由跳转

wx.navigateTo：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
wx.switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.reLaunch：关闭所有页面，打开到应用内的某个页面
wx.navigateBack：关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。
wx.redirectTo：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

<view bindtap = "tapNext"> 跳转到2级页面</view>

 tapNext:function(){
    wx.redirectTo({
      url: '/pages/sort/sort',
      success:function(e){
        console.log(e)
      }
    })
  },

小程序的页面传参和取参。

<navigator url="/pages/sort/sort?id=1&name=aaaa"> 小程序的传递参数</navigator>

onLoad: function (options) {
    console.log(options)
  },

小程序的底部导航栏

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar
https://developers.weixin.qq.com/miniprogram/dev/extended/weui/tabbar.html

app.json
"tabBar": {
    "color": "#000",
    "sselectedColor":"#0f0",
    "borderStyle":"black",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      
    },{
      "pagePath": "pages/sort/sort",
      "text": "分类"
    }]
  }

利用require加载js文件

var formate = require("../../utils/util.js")

onLoad:function(options){
var  date  = new  Date()
    console.log(date)

    var d = formate.formatTime(date)
    console.log(d)
    }

WXML的模版编写和引入

wxs模块引用。

https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/01wxs-module.html
// 创建wxs文件。

var textStr = "hello world"

var num  =  function(num1,num2){
  return num1+num2;
}

module.exports = {
  message:textStr,
  add:num
}
//引入wxs

<wxs module = "test" src = "../../wxs/util.wxs">
</wxs>
<view>{{test.message}}</view>


<view>{{test.add(1,11)}}</view>

网友评论

本文标题：微信小程序开发

本文链接：https://www.haomeiwen.com/subject/ejgtqhtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！