小程序开发总结(一)

最近在开发一个小程序项目准备上线中也是第一个做的小程序中间遇到很多坑通过自己不断实践和努力解决了也分享给大家,缩短大家的开发时间。

一、修改背景颜色
这是一个很常见的需求在html的中我们可以改变body&html的标签颜色,但是在小程序中你可以通过两种方法
1、修改page的颜色
2、在app.json的文件中修改

"backgroundTextStyle": "#f2f2f2", //注意这里两个属性值需要一致本人亲测
"backgroundColor": "#f2f2f2"

二、地图引用(腾讯地图)

1、在小程序的需求当中地理位置是常见的一种需求我们这里选用的是腾讯地图,后台用的是百度地图有人肯定问为什么不使用同一个地图,这里是出于百度地图开发文档比较齐全,市面上的开源的插件功能也比较齐全所以后台选用的是百度地图,小程序的爸爸是腾讯所以选的腾讯地图但是在后台需要对经纬度值做一个转换因为百度和腾讯的地图不是同一种经纬度标准。

后期还是需要统一地图标准

腾讯地图使用方法

  1. 腾讯地图官网申请一个开发者帐号附(http://lbs.qq.com/mykey.html
  2. 创建一个密钥
  3. 在微信公众号平台设置一个安全域名
    这里有个坑如果你不设置这个安全域名在手机演示中无法访问地图api需要打开调试模式才行
  4. 具体api可以看腾讯地图文档

三、寻找监听安卓返回事件或者ios的顶部的返回事件

我之前一直想找到这个事件因为某些页面返回的时候需要返回到指定页面而不是父级路由过来的页面后面用小程序的生命周期函数解决了这个问题

onUnload(){
    wx.switchTab({
        url: ‘/pages/order/index‘,  // 这里就是你一路向西的地方
        fail: function (res) {
        }
    })
}

四、字体图标

我相信很多前端的开发者用完iconfont肯定是爱不释手了但是小程序不能用

谁叫阿里腾讯不是一家人了,不过这个还是有一个解决办法

  1. 因为小程序背景图只支持base64的我们可以将iconfont文件转换为base64的
  2. 从iconfont把文件下载下来记住我们要选择fontClass的模式
  3. 然后在这个平台https://transfonter.org/把字体文件转换成base64
  4. 在lib文件中引入
  5. 在wxss加入字体


    大功告成
    (后续不断更新···)

原文地址:https://www.cnblogs.com/homehtml/p/12209228.html

时间: 2024-11-18 02:03:23

小程序开发总结(一)的相关文章

Java微信小程序开发_00_资源帖

1.微信小程序开发:http://blog.csdn.net/column/details/13721.html?&page=1 2.微信小程序栏目:http://blog.csdn.net/column/details/14653.html?&page=2 3.

微信小程序开发视频教程

课程:拜师学艺,微信小程序从入门到大神必经之路(第一季,共四季) 课程观看地址:http://www.xuetuwuyou.com/course/172/lesson/list 课程出自学途无忧网:http://www.xuetuwuyou.com 讲师:风舞烟 课时列表: 第一部_诞生 - 天降大任:名门贵族,互联网开发新宠--小程序横空出世 第1章 : 忽如一夜春风来--小程序的前世今生 课时1:课程开场 课时2:本章目标及任务 课时3:第一回合_小王子出世-微信小程序_小程序为什么这么火

微信小程序开发心得

微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司认证信息如,营业执照等 再次就是用一个未曾开通过公众号的QQ号或微信号来注册一个微信小程序号. 最后,下载微信小程序开发工具. 由于这里,我们更多的关注如何去开发一些app,而不是科谱微信小程序,故在此不在过多的解释,详细的说明,可以去官网帮助文档. 首先,我们拿自己的项目在一步一步的说明并开发吧,

微信小程序开发 --02

微信小程序在开发中,难度系数不是很大,其中应用的技术也是web开发中常用的技术,虽然在微信开发者工具中的叫法与常见的web开发的叫法不太一样. 首先,在微信小程序开发中,代码文件格式大体有以下四中: .wxml .wxss .js .json 首先,wxml后缀的文件类似于html和xml的结合,例如在html中常用的div在微信小程序开发中被替换成了view,而在html中输出文本用的p标签被替换成了text标签,引入图像由html中的img 标签变成了image标签,等等.如果你之前开发的w

微信小程序开发之数据存储 参数传递 数据缓存

微信小程序开发内测一个月.数据传递的方式很少.经常遇到页面销毁后回传参数的问题,小程序中并没有类似Android的startActivityForResult的方法,也没有类似广播这样的通讯方式,更没有类似eventbus的轮子可用. 现在已知传递参数的方法只找到三种,先总结下.由于正处于内测阶段,文档也不是很稳定,经常修改,目前尚没有人造轮子. 先上GIF: 1.APP.js 我把常用且不会更改的参数放在APP.js的data里面了.在各个page中都可以拿到var app = getApp(

微信小程序开发(3) 热门电影

在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发热门电影及预览功能. 本文主要分为两个部分,小程序主体部分及计算器业务页面部分 一.小程序主体部分 一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下: 1. 小程序逻辑 App({ onLaunch: function() { // Do something initial when launch. }, onShow: function() { // Do something when show. }, onHide: f

[转]灯灯小程序开发手记:仿今日头条(上)

本文转自:http://www.jianshu.com/p/a1e0b8abb12d 写在前面 新的一年,祝大家新年快乐!当然对于程序员来说,新的一年,也要有新的改变.因此灯灯决定凑热闹编写微信小程序啦! 上一篇文章<记一次小程序开发过程>中,灯灯大致写了下自己第一次开发小程序的感受和流程.这一次灯灯会详细记录下自己制作一个小程序的思路.遇到的问题.涉及到的代码等和大家分享.    视频教程地址:http://study.163.com/course/introduction.htm?cour

微信小程序开发类型有哪些?

广州微信小程序开发公司(www.dthulian.com)品向科技表示,随着现在的互联网最热门话题,应该是微信小程序开发.那么我们就和大家来探讨下微信小程序开发类型有哪些? 首先微信小程序是什么? 微信小程序是由微信之父张小龙提出的一个概念,小程序是一种不需要下载安装就可以使用的应用,它实现了触手可及的梦想,用户只需扫一扫或者搜一下就可以打开应用.也体现了用完即走的理念,用户不用关心是否安装太多应用的问题,应用将无处不在,应用将随时可用,但又无需考虑安装及卸载. 对用户来讲,小程序可以实现"用完

微信小程序开发实战视频教程发布

昨日(9月23),腾讯终于发布了没有APPid,无需申请也可以进行微信小程序开发的视频教程了,我在在第一时间尝试并发布了这7个小视频教程,入门足够了.... 各位免费拿去,慢慢享用: 链接: https://pan.baidu.com/s/1o7DX7q6 密码: ztzq 也可以添加 微信小程序开发者交流QQ群:434276993,只欢迎对微信小程序开发有兴趣的朋友,其他勿加,感谢.

杭州微信应用号小程序开发解决方案

杭州微信应用号小程序开发[金华腾云科技]微信应用号小程序(应用号)就是用户关注了一个应用号,就像安装了一个App一样.这样微信将被打造成一个全新的appstore,而每一个应用号就是一个个的webapp. 怎么理解这个概念? 下载安装app 太麻烦了,微信的小程序就可以满足你;安装 / 卸载 / 使用小程序,就像关注 / 取关 /进入公众号一样简单;你用完就可以走,不用担心装个 app 占你空间. 杭州微信应用号小程序(应用号)有几个功能? 1.微信应用号小程序(应用号)能实现对App个性功能的