• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

微信小程序开发小记

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

年前的时候,因为公司开发小程序的人员不够,临时参与了一个项目中几个小模块的开发,这里做个简单的小记录,眼过千篇不若手过一遍,希望将来如果要用到时不至于大脑空白!

开发工具:wechat_devtools

一,准备工作

1.申请账号。

2.安装开发工具。

二,小程序代码构成

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

先贴一个配置代码:

{
  "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 切换时显示的对应页面。

    Tip:

    1. 当设置 position 为 top 时,将不会显示 icon
    2. tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。
    3. 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 也做了一些扩充和修改。

  1. 新增了尺寸单位。在写 CSS 样式时,开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比,采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ,开发者可以免去换算的烦恼,只要交给小程序底层来换算即可,由于换算采用的浮点数运算,所以运算结果会和预期结果有一点点偏差。
  2. 提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同,你可以写一个 app.wxss 作为全局样式,会作用于当前小程序的所有页面,局部页面样式 page.wxss 仅对当前页面生效。
  3. 此外 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 。

四,发布前的准备

五,上线

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序音频播放 InnerAudioContext 的用法发布时间:2022-07-18
下一篇:
小程序背景叠阴影发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap