前几日抽空看了下小程序,发现挺好玩的,mvvm的结构,语法比vue要简单,内置了一系列的组件,很方便。然后开发者工具直接上传代码,提交审核,然后发布,感觉挺好。虽然不打算做个工具类的,但是做个介绍类小程序就很合适了。不用去做什么官网,也不用买服务器域名什么的,用邮箱注册个号,把自己想介绍的东西方式去,手机上发给别人也挺方便。

01.语法结构

结构上很好理解,app.js可以直接获取用户的登录信息,也可以什么都不做,关键还是app.json

{
"pages":[
"pages/index/index",
"pages/about/about",
"pages/location/location",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "书山有路",
"navigationBarTextStyle":"black"
},
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "images/m.png",
"selectedIconPath": "images/m1.png"
},
{
"pagePath": "pages/location/location",
"text": "位置",
"iconPath": "images/w.png",
"selectedIconPath": "images/w1.png"
},{
"pagePath": "pages/about/about",
"text": "关注",
"iconPath": "images/g.png",
"selectedIconPath": "images/g1.png"
}
]
}
}

每一个页面必须在pages中进行注册,window是一些基本的外观配置,tabBar就是用来设置一个页底导航。基本上每个页面都包含了.js,.wxml和.wxss文件,.js以

Page({})开始,设置数据和方法,很简单。wxml也就是页面文件,有很多微信自己定义的元素,比如view,text和image,可以分别对应div,span和img。wxss就和css一样。

02.滑动

swiper挺方便的,有个问题就是不能自适应高度。

<swiper indicator-dots="true"
autoplay="true" interval="{{interval}}" duration="{{duration}}" style='height:{{Hei}}' >
<block wx:for="{{imgUrls}}">
<swiper-item >
<image src="{{item}}" mode="widthFix" bindload="imgH" class="slide-image" />
</swiper-item>
</block>
</swiper>

找了个网友的办法,亲测有效

  imgH: function (e) {
var winWid = wx.getSystemInfoSync().windowWidth; //获取当前屏幕的宽度
var imgh = e.detail.height;                //图片高度
var imgw = e.detail.width;
var swiperH = winWid * imgh / imgw + "px"          //等比设置swiper的高度。 即 屏幕宽度 / swiper高度 = 图片宽度 / 图片高度 ==》swiper高度 = 屏幕宽度 * 图片高度 / 图片宽度
this.setData({
Hei: swiperH        //设置高度
})
},

不要忘了在data里面设置Hei属性。

03.地图

地图官方文档说的很详细,我也没必要说了,主要是用百度找经纬度:拾取坐标系统,很方面。

04.获取用户信息

在默认的app.js里面已经提供了

// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
console.log(res.userInfo) // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
},
globalData: {
userInfo: null
}

如果我们要在别的页面用userInfo

var app = getApp();//
Page({
data:{
userInfo:{}
}
//....
onLoad() {
this.setData({ userInfo: app.globalData.userInfo })
}
})

对data对象复制都需要使用setData。这样你就可以在页面显示用户的头像和名称。

05.长按扫码

这个功能其实有点鸡肋,因为只能扫小程序的二维码,如果用户都已经进了这个页面,扫码还有个什么意义,因为小程序肯定已经下载了。关键用户还是想扫微信二维码或者公众号的二维码。微信确实管的比较严。

  previewImage: function (e) {
wx.previewImage({
current: 'http://images.cnblogs.com/xxxxx', // 当前显示图片的http链接
urls: ['http://images.cnblogs.com/xxxx'] // 需要预览的图片http链接列表
}) },
<image class='img' bindtap="previewImage"  src='images/actv.jpg' />

这里的current和urls必须是http链接,没法用相对路径。于是最简单的,我就把图片传到了博客园的图册里面... 这样用户点击图片就能出现保存,发送给朋友,收藏。只有小程序二维码才会出现扫码识别....

06.图标

我们需要一些图标,个人毕竟不想去找美工。发现阿里的这个还不错:http://www.iconfont.cn/

当然还有https://www.easyicon.net/,不过这家有时候不稳定。

小结:以上只是些简单功能的小程序开发,整体感觉不错,开发速度很快,只是这个流量和转化有点难,但确实方便。而且这名称就相当于是pc时代的域名了,如果用户有了搜一搜小程序的习惯,想在微信上看你们家东西,如果没有搜到是不是有点遗憾。早点占个名字也行。

微信小程序小结的更多相关文章

  1. 微信小程序小结(5) -- 常用语法

    在 pages 字段的第一个页面就是这个小程序的首页(打开小程序看到的第一个页面). Page生命周期 属性 类型 描述 onLoad Function 生命周期函数--监听页面加载.一个页面只会调用 ...

  2. 微信小程序小结(1) ------ 前后端交互及wx.request的简易封装

    微信小程序的应用目前越来越多,不管喜欢与否我们都应该了解一些.废话不多,直接干货. 做项目自然避免不了前后端的交互,小程序在调试过程中需要在先在:小程序公众平台--设置--开发设置中,将要从后台请求的 ...

  3. 微信小程序小结02-- 完整的demo

    小程序确实方便,在移动端方便小个体宣传,不需要服务器和域名,还有客服功能.按朋友的意思,做了一次调整,分成了首页.预约和我的三个页面. 下面说下遇到的几个问题. 01.客服功能 不得不说这个一条龙服务 ...

  4. 微信小程序小结(2) ------ 自定义组件

    在小程序中有模板跟组件的概念.但模板更多的用于内容的展示,更复杂的交互逻辑就没办法了.所以在小程序中也定义了一些组件来解决一些简单逻辑的功能. 但有时预定义的组件并不能满足我们的需求,这时就需要我们自 ...

  5. 微信小程序小结(4) -- 分包加载及小程序间跳转

    分包加载 某些情况下,开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载(主要是空间不够用,哈哈~). 在构建小程序分包项目时,构建会输出一个或多个功能的分包,其中 ...

  6. 微信小程序小结(3) -- 使用wxParse解析html及多数据循环

    wxParse-微信小程序富文本解析组件:https://github.com/icindy/wxParse 支持Html及markdown转wxml可视化 使用 1.copy下载好的文件夹wxPar ...

  7. 让微信小程序开发如鱼得水

      关于微信小程序开发一直想写一篇相关的文章总结和记录下,结果拖延症犯了迟迟没有下笔:这不最近天气不错,于是找一个空闲的下午将这篇文章输出下(好像跟天气没啥关系),那我们就开始吧! 注意:本文默认开发 ...

  8. 微信小程序支付简单小结与梳理

    前言 公司最近在做微信小程序,被分配到做支付这一块,现在对这一块做一个简单的总结和梳理. 支付,对于购物来说,可以说是占据了十分重要的一块,毕竟能收到钱才是重点. 当然在开发之前,我们需要有下面这些东 ...

  9. [转]微信小程序支付简单小结与梳理

    本文转自:https://www.cnblogs.com/onetwo/p/6667424.html 公司最近在做微信小程序,被分配到做支付这一块,现在对这一块做一个简单的总结和梳理. 支付,对于购物 ...

随机推荐

  1. SSM-MyBatis-07:Mybatis中SqlSession的insert和delete底层到底做了什么

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 先点进去看一下insert方法 用ctrl加鼠标左键点进去看 发现是一个接口SqlSession的方法,没有实 ...

  2. Intent里ACTION的CALL和DIAL的区别?

    Intent在进行activity之间的跳转的时候有一种方式是通过设置ACTION的方式来进行跳转的,这个ACTION是设置在manifest文件里Intent-filter里的,我们可以通过跳转自定 ...

  3. C#温故而知新系列 -- 闭包

    闭包的由来 要说闭包的由来就不得不先说下函数式编程了.近几年函数式编程也是比较火热,我们先来看看函数式编程的一些基本的特性这个有助于我们理解闭包的由来. 函数式编程 函数式编程是一种编程模型,他将计算 ...

  4. Oracle12c中功能及性能新特点之with子句的增强

    1. 设置创建测试表.DROP TABLE test PURGE; CREATE TABLE test ASSELECT 1 AS idFROM   dualCONNECT BY level < ...

  5. CSS+DIV定位分析(relative,absolute,static,fixed)

    在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所 ...

  6. java.lang.OutOfMemoryError: PermGen space 解决办法

    最近在学习spring mvc时,用了大量的第三方jar包,导致启动tomcat时报内存溢出的错 java.lang.OutOfMemoryError: PermGen space 解决办法:在mye ...

  7. win10想开测试模式,提示“设置元素数据时出错

    系统中按WIN键,搜索栏输入'CMD',右键点击找到的cmd.exe,选择'以管理员身份运行'.输入:"bcdedit -set loadoptions DDISABLE_INTEGRITY ...

  8. (二)Servlet入门之HelloWorld

    在整个Servlet程序中最重要的就是Servlet接口,在此接口下定义了一个GenericServlet的子类,但是,一般不会直接继承此类,而是根据所使用的协议选择GenericServlet的子类 ...

  9. 安装Navicat for MySQL

    注: 以下内容引自 https://www.cnblogs.com/da19951208/p/6403607.html Navicat for MySQL下载.安装与破解   一:下载Navicat ...

  10. [Usaco2005 dec]Layout 排队布局 差分约束

    填坑- 差分约束一般是搞一个不等式组,求xn-x1的最大最小值什么的,求最大值就转化成xa<=xb+w这样的,然后建图跑最短路(这才是最终约束的),举个例子 x1<=x0+2x2<= ...