小程序谏言

Silicn84745
281 阅读4分钟

1，初始配置

  • 针对iOS开发者接触小程序导续
  • 测试程序一般申请测试号即可，就是一个wxAppId。
  • 然后基础的架构开发工具会自动搭建完成。

2，项目架构说明

一个Project小程序架构包含如下：

  • peoject.config.json：配置文件，基本可以无视
  • 然后就是类似html的三大块：js、json、wxml、wxss
  • js : 脚本文件
  • json：页面配置文件
  • wxml：页面布局文件
  • wxss：页面样式文件

3，app模块

  • app.js类似于iOS的AppDelegate文件，里面有基本的Onlaunch函数等同于iOS的didFinishLaunchingWithOptions方法。

  • 在app.json文件自动注册页面路径、设置window样式、以及配置tabBar等路由页面

  • 在app.wxss配置全局的styles，如果你用weui框架，可以导入style/weui.wxss

代码如下：

App({
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        console.log("login success")
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
})
// 这些为默认设置

{
  "pages": [
  // 默认会自动添加
  ],
  "window": {
    "backgroundTextStyle": "light",
  },
  "tabBar": {
    "color": "#6e6d6b",
    "selectedColor": "#FF5A4B",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "",
        "selectedIconPath": "",
        "text": ""
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

/**app.wxss**/
@import 'style/weui.wxss';

page{
    background-color: #EDEDED;
    font-size: 16px;
    font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
}

4，页面模块

说起页面首先要说到框架，我用的是weui，当然也可以用别的，只不过weui风格和iOS更加贴近而已，

weui已经封装好的组件cell、cells、Actionsheet等，不用这些的话也可以用weui-wxss写

1）基础UI页面构建

使用组件在index.json里配置

{
  "usingComponents": {
    "billView":"../components/mine_bill",
    "cardType":"../components/cardType",
    "colorBtn":"../components/colorBtn",
    "mineLimit":"../components/limit_info",
    "cardView":"../components/card/card"
  },
  "navigationBarTitleText":"标题"
}

同时在index.wxml里面使用

<view class="page">
  <!-- 头部视图 -->
  <view class="page_hd">
    <cardView></cardView>
  </view>

   <view class="page_bd page_tqhk">
       <view style="font-size:15px; font-weight:600"> 下月待还(元):1252.0</view>
       <colorBtn title = "提前还款" bindtap="goToMineBill"></colorBtn>
    </view>

  <view class="page_bd">
    <!-- 我的账单 -->
    <scroll-view class="weui-scrollview mine_order"  scroll-x="{{true}}"scroll-with-animation="{{true}}" >
        <billView class="item" 
                  title="我的账单" 
                  color="#EFFAFF" 
                  subTitle="还款日" 
                  bind:btnAction="gotoSee" 
                  bind:billAction="goToMineBill"/>
    </scroll-view>

    <!-- 我的额度 -->
    
    <view class="mine_limit">
      <view class="mine_limit_title" style="font-size:16rpx:font-weight:700">我的额度       </view>
      <mineLimit></mineLimit>
    </view>
    
    <!-- 立即绑卡 -->
    <view class="mine_limit">
      <view style="font-size:16rpx:font-weight:700">立即绑卡</view>
      <view class="bindcard_content">
        <cardType class="card_type" title="微信"></cardType>
        <cardType class="card_type" title="支付宝"></cardType>
        <cardType class="card_type" title="手机钱包"></cardType>
      </view>
    </view>
  </view>
</view>

index.wxss里面就不说了，和其他的css合适没有区别

2）页面交互

以index.js为例

 gotoSee:function(){
    wx.showToast({
      title: '去看看',
      icon: 'success',
      duration: 3000
  })
  },
  goToMineBill:function(){
    wx.navigateTo({
      url:"../repayment/repayment"
    })
  },

在index.wxml里面bind

<billView class="item" 
          title="设置分期" 
          color="#FFF8EE" 
       btnTitle="去设置" 
       subTitle="不分期" 
 bind:btnAction="gotoSee" 
        bindtap="goToMineBill">
</billView>
3）组件的构建

组件的构建中，wxml文件是基本相同的，js文件有部分差异

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    title:String,
    subTitle:String,
    btnTitle:String,
    showBill:{
      type:Boolean,
      value: true
    },
    color:String
  },
  /**
   * 组件的初始数据
   */
  data: {
  },
  /**
   * 组件的方法列表
   */
  methods: {
    _btnAction(){
      this.triggerEvent("btnAction");
    },
    _billAction(){
      this.triggerEvent("billAction");
    }
  }
})

在wxml中bind方法和属性赋值

<view class="container" style="background:{{color}}">
    <view style="font-size:13px; font-weight:500;margin-top:8rpx">{{title}}</view>
  
    <block wx:if="{{showBill}}" >
         <view style="font-size:10px; color:#999999;margin:8rpx 0rpx"                 
            catchtap='_billAction'>{{subTitle}}</view>
    </block>
    <view class="btn" catchtap='_btnAction'>{{btnTitle?btnTitle:"去看看"}}>></view>
</view>

其中，<block>无任何意义，只是表示一个块结构。

4）传值的问题

  • 正向传值三种方式

    • url拼接参数
    • app全局变量
    • 本地存储

  • 反向传值：通过数据绑定bind

例子1：正向传值绑定

第一步：首先在wxml中的bind中赋值data-property，例如bind:tap="goToDetail" data-obj=" {{item}}"

在js文件中goDetailfunction中

 goToDetail:function(e){
    if (e.currentTarget.dataset.obj) {
      let a = e.currentTarget.dataset.obj;
      let b = {"name":a.title,"time":a.created_name,"content":a.content};
      wx.navigateTo({
        url:"../home/detail?obj=" + JSON.stringify(b)
      })
    }
  },

第二步：第二个页面收取传值为

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    if (options.obj) {
      this.setData({
        obj:JSON.parse(options.obj)
      })
    }
  },

例子2：反向绑定

见页面交互解释2）和3）。

5）网络请求

网络请求是小程序内部提供的:wx.request

 requestData: function(){
    // 页面loading
    wx.showLoading({
      title:"加载中..."
    })
    var self = this;
    wx.request({
      url:"https://",
      //成功回调
      success(res){
        console.log(res.data.list);
        // 隐藏loading
        wx.hideLoading();
        // 停止刷新
        wx.stopPullDownRefresh();
        self.setData({
          dataSource:res.data.list,
        })
      },
      // 失败回调
      failure(){

      }
    })
  },

常用的下拉刷新和上拉加载更多功能，每个page默认内置，开启需要在json文件中配置"enablePullDownRefresh":true,。

/**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    console.log('刷新');
    this.requestData();
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log('加载更多');
    this.requestData();
  },
6)常用的component

  • 圆角按钮

    不知道具体的高度，可设置border-radius是一个大值，例如9999px。

    .container{
    display: flex;
    background: linear-gradient(to right,#FF5A4B,#FF6E73);
    width: auto;
    align-items: center;
    justify-content: center;
    padding: 10rpx;
    border-radius: 9999px;
}

5，总结

  • html基础要有，主要是页面布局
  • js语法熟悉，页面交互和逻辑
  • Demo地址：[小程序Demo](
avatar
文章
阅读
粉丝