微信小程序开发小记

时间 2019-11-12

标签微信程序开发繁體版

原文原文链接

年前的时候，由于公司开发小程序的人员不够，临时参与了一个项目中几个小模块的开发，这里作个简单的小记录，眼过千篇不若手过一遍，但愿未来若是要用到时不至于大脑空白！html

开发工具：wechat_devtoolsgit

一，准备工做

1.申请帐号。json

2.安装开发工具。小程序

二，小程序代码构成

1.json配置：app.json 是对当前小程序的全局配置，包括了小程序的全部页面路径、界面表现、网络超时时间、底部 tab 等。这里说pages,window,tabBar三个项目中使用到的主要配置项，其他配置可参考小程序配置app.json微信小程序

先贴一个配置代码：api

{
  "pages": [
    "pages/index/index",
    "pages/info/info",
    "pages/detail/detail",
    "pages/unpay/unpay",
    "pages/history/history",
    "pages/mall/mall",
    "pages/discover/discover"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "紫微斗数",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "测算",
        "iconPath": "images/index_icon1.png",
        "selectedIconPath": "images/index_icon2.png"
      },
      {
        "pagePath": "pages/history/history",
        "text": "个人",
        "iconPath": "images/history_icon1.png",
        "selectedIconPath": "images/history_icon2.png"
      },
      {
        "pagePath": "pages/discover/discover",
        "text": "发现",
        "iconPath": "images/discover_icon1.png",
        "selectedIconPath": "images/discover_icon2.png"
      },
      {
        "pagePath": "pages/mall/mall",
        "text": "商城",
        "iconPath": "images/mall_icon1.png",
        "selectedIconPath": "images/mall_icon2.png"
      }
    ],
    "color": "#7C7C7C",
    "selectedColor": "#BA3E3E",
    "borderStyle": "white",
    "backgroundColor": "#fff",
    "position": "bottom"
  }
}

pages:
接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项表明对应页面的【路径+文件名】信息，数组的第一项表明小程序的初始页面。小程序中新增/减小页面，都须要对 pages 数组进行修改。数组

文件名不须要写文件后缀，由于框架会自动去寻找路径下 .json, .js, .wxml, .wxss 四个文件进行整合。微信

　　　例如：“pages/detail/detail”。将对应detail文件夹中的js,json,wxml,wxss四个文件。网络

window:用于设置小程序的状态栏、导航条、标题、窗口背景色。各字段可见名知意。

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "紫微斗数",
    "navigationBarTextStyle": "black"
  },

tabBar:
若是小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏能够切换页面），能够经过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。app

Tip：

当设置 position 为 top 时，将不会显示 icon
tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
List后面的参数用来设置底部导航的样式，例如字体颜色，选中颜色以及背景色等等。

 "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "测算",
        "iconPath": "images/index_icon1.png",
        "selectedIconPath": "images/index_icon2.png"
      },
      {
        "pagePath": "pages/history/history",
        "text": "个人",
        "iconPath": "images/history_icon1.png",
        "selectedIconPath": "images/history_icon2.png"
      },
      {
        "pagePath": "pages/discover/discover",
        "text": "发现",
        "iconPath": "images/discover_icon1.png",
        "selectedIconPath": "images/discover_icon2.png"
      },
      {
        "pagePath": "pages/mall/mall",
        "text": "商城",
        "iconPath": "images/mall_icon1.png",
        "selectedIconPath": "images/mall_icon2.png"
      }
    ],
    "color": "#7C7C7C",
    "selectedColor": "#BA3E3E",
    "borderStyle": "white",
    "backgroundColor": "#fff",
    "position": "bottom"
  }

2.WXML 模板：这就相似于咱们的html标记语言，不过规则略微不一样，详情可参考官方文档小程序WXML。

<!--pages/detail/detail.wxml-->
<view class="body" style="width:{{width}}px;height:{{height}}px;">
  <scroll-view class="main" scroll-y style="width:{{width}}px;height:{{height}}px;">
  <view class="bg-box">
     <image src="../../images/banner.jpg" mode="widthFix"></image> 
    <view class="user-message clear">
      <view class="box">
         <image src="{{userInfo.avatarUrl}}" mode="widthFix" style="border-radius:50%;"></image> 
        <view class="name">姓名：{{orderList.name}}</view>
        <view class="p-box">阳历 ：{{orderList.year}}年{{orderList.month}}月{{orderList.day}}日  {{hours[orderList.hour]}}时</view>
      </view>
    </view>
    
    <view class="info-box">
      <view style="margin-bottom:1rem;color:#7F453A;font-size:0.875rem;font-weight:bold;">您已解锁下列测算内容，点击可查看详情。</view>
        <view class="m-body">
          <view class="ul">
            <block wx:for="{{list}}">
              <view class="li ispay" catchtap='changePage' data-index="{{index+1}}">
                <view class="tit-box">
                  <view class="tit_s">{{item.title}}</view> 
                  <view class="sanjiao">></view>
                </view> 
              </view>
            </block>
          <view style="width:100%;height:20px;"></view>
          </view>
        </view>
    </view>
  </view>
  <view style="height:2.4rem;"></view>
  </scroll-view>
</view>

3.WXSS :WXSS 具备 CSS 大部分的特性，小程序在 WXSS 也作了一些扩充和修改。

新增了尺寸单位。在写 CSS 样式时，开发者须要考虑到手机设备的屏幕会有不一样的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者能够免去换算的烦恼，只要交给小程序底层来换算便可，因为换算采用的浮点数运算，因此运算结果会和预期结果有一点点误差。
提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你能够写一个 app.wxss 做为全局样式，会做用于当前小程序的全部页面，局部页面样式 page.wxss 仅对当前页面生效。
此外 WXSS 仅支持部分 CSS 选择器

更详细的文档能够参考 WXSS 。

app.wxss中能够设置全部页面的样式，每一个具体样式文件中，只能设置它对应的文件的样式。

4.JS交互：微信小程序中，咱们不能直接操做dom，只能在wxml对应的js文件中定义好函数，而后使用某种绑定方式（好比bindtap）绑定到dom元素上，来触发。

<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>

点击 button 按钮的时候，咱们但愿把界面上 msg 显示成 "Hello World"，因而咱们在 button 上声明一个属性: bindtap ，在 JS 文件里边声明了 clickMe 方法来响应此次点击操做：

Page({
  clickMe: function() {
    this.setData({ msg: "Hello World" })
  }
})

三，小程序的能力

1.小程序启动：

微信客户端在打开小程序以前，会把整个小程序的代码包下载到本地。紧接着经过 app.json 的 pages 字段就能够知道你当前小程序的全部页面路径，写在 pages 字段的第一个页面就是这个小程序的首页(打开小程序看到的第一个页面)。

因而微信客户端就把首页的代码装载进来，经过小程序底层的一些机制，就能够渲染出这个首页。

小程序启动以后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行:

App({
  onLaunch: function () {
    // 小程序启动以后 触发
  }
})

整个小程序只有一个 App 实例，是所有页面共享的，更多的事件回调参考文档注册程序 App 。

2.小程序的页面：

看看detail.js文件的内容

// pages/detail/detail.js
var app = getApp();
Page({
  /**
   * 页面的初始数据
   */
  data: {
    data1: 0,
  },
  onLoad: function (options) {
  },
  getInfo:function(sn){
  },
  changePage: function (res) {
    var index = res.currentTarget.dataset.index;
    var sn = this.data.sn
    wx.navigateTo({
      url: '../info/info?index=' + index + "&sn="+sn
    })
  },

  onShareAppMessage: function () {
    return {
    }
  }
})

Page 是一个页面构造器，这个构造器就生成了一个页面。在生成页面的时候，小程序框架会把 data 数据和 index.wxml 一块儿渲染出最终的结构，因而就获得了你看到的小程序的样子。

在渲染完界面以后，页面实例就会收到一个 onLoad 的回调，你能够在这个回调处理你的逻辑。全部页面中须要用到的函数等都要写在page构造器的内部，而后在合适的时机被调用。

有关于 Page 构造器更多详细的文档参考注册页面 Page 。

备注：在传统的html开发的页面中，若是没有作特殊处理，只有当页面中引用了对应的样式文件和逻辑交互代码文件，它们才会起做用。前面提到过，微信小程序会自动匹配文件，全部只要你的文件名命名规范，全部页面的样式及交互文件会自动被引用。

3.组件：小程序提供了丰富的组件能够供咱们使用，同时咱们也能够本身自定义符合本身要求的组件。

组件的引用和html中的标签相似，咱们还可也给组件传值，例如咱们要显示地图，而且在用户单击地图时作出响应代码能够以下来书写：

<map bindmarkertap="markertap" longitude="广州经度" latitude="广州纬度"></map>

这个地图组件的中心将是广州的经纬度，同时单击地图时会触发绑定的markertap事件。咱们也能够经过class类名或者style来控制组件的样式。

更多的组件能够参考小程序的组件。

4.API:为了让开发者能够很方便的调起微信提供的能力，例如获取用户信息、微信支付等等，小程序提供了不少 API 给开发者去使用。

须要注意的是：多数 API 的回调都是异步，须要处理好代码逻辑的异步问题。

API 能力见小程序的API 。

四，发布前的准备

五，上线

四五两点须要有相应的身份才可使用，这个具体须要用到时能够去官网查阅。^_^

1. 微信小程序开发小记
2. 微信小程序开发
3. #微信小程序开发
更多相关文章...
• MySQL FLOAT、DOUBLE、DECIMAL（小数类型） - MySQL教程
• W3C 程序 - W3C 教程
• PHP开发工具
• Spring Cloud 微服务实战(三) - 服务注册与发现