前言
最近公司要调研一下微信小程序,说是做技术积累。
可我是一个iOS开发者,硬着头皮来吧,整理一下两周的调研结果
1,初始配置
- 测试程序一般申请测试号即可,就是一个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)传值的问题
第一步:首先在wxml
中的bind
中赋值data-property
,例如bind:tap="goToDetail" data-obj="{{item}}"
在js
文件中goDetail
function中
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)
})
}
},
或者
利用localStorage
对数据进行传递,这个不多说。
5,总结
- html基础要有,不然页面都难布局
- js语法熟悉,页面交互和逻辑都需要