分类归档

小程序

FWQ
小程序
怎么把本地图片当作小程序背景
我们知道在微信小程序中是不能直接给view设置本地图片的。那么我们怎么解决这个问题呢? (学习视频分享:) 解决方法如下: 1、使用网络图片 2、使用base64格式 3、使用image来装载本地的图片,然后作为界面背景 前面两种都很简单,下面我们重点来讲讲第三种。一般大家的苦恼都是这么把imageview放到界面的最下面。那么下面直接上代码。wxml <view>   <image></image>   <view>   </view></view> 登录后复制 wxss .root {    width: 100%;     height: 100%;     background-color: #70c7da;     position: relative; } .background-image{    height : 100%;     position: absolute;     width: 100%;     left: 0px;     top: 0px; } .content{     position: absolute;…
2024-11-25 阅读全文 →
FWQ
小程序
小程序开发实践之浅析如何获取手机号码
小程序如何获取用户手机号码?下面本篇文章给大家介绍一下小程序开发中获取用户手机号码的方法,希望对大家有所帮助! 1、背景 在平时使用第三方微信小程序时,经常会有需要获取微信手机号码的情况,如下图所示: 【相关学习推荐:】 那这种是怎样实现的呢?下面记录下获取微信手机号码的方法。 **备注:**需要有一个微信小程序号,并且这个号是经过企业认证的。(获取手机号码的功能不对个人小程序号生效) 那下面我们就一起开始,获取手机号码的编程之旅了。 2、代码实现 2.1 新建工程 在app.json文件中新增    “pages/getphonenumber/getphonenumber”, 如下图所示: 2.2 准备密文解析工具类 通过微信小程序提供的接口获取手机号码,返回的数据是加密的,所以需要对返回的加密数据进行解密。 1)  新建终端 在微信开发者工具中,点击 “终端” -》 “新建终端” 如下图所示: 2) 执行  npm init 指令 //执行npm…
2024-11-25 阅读全文 →
FWQ
小程序
微信开发-有关微信授权问题
这篇文章主要介绍了微信开发 微信授权详解的相关资料,需要的朋友可以参考下 最近有机会做到一个微信项目;把其中自己整理的笔记分享给大家,有不足或错误的地方望大家指正! 1关于微信授权这块的流程图,如下 一些代码碎片仅供参考: var myNickname; var myHeadimgurl; var activityId; function saveData() {   //$("#pShow").show();   var obj = {};   obj.openId = myOpenId;   obj.nickname = myNickname;// 微信昵称   obj.headimgurl = myHeadimgurl;// 用户头像   // obj.activityimg = "xx";//活动图片 } 登录后复制 本地存储的运用: /* *注明:由于本地存储的东西,一般是可以看到的,所有有一种说法:如果是重*要的数据建议不使用这种方式。 */ //本地存储的运用 -存值 openId = localStorage.getItem("openId"); accesstoken = localStorage.getItem("accesstoken"); //本地存储的运用 -取值 openId = localStorage.getItem("openId"); accesstoken = localStorage.getItem("accesstoken"); 登录后复制…
2024-11-25 阅读全文 →
FWQ
小程序
推荐给初次接触微信开发的人
微信小程序是一个介于原生app和h5之间的一个东东。如果用过cordova,hbuiler,appcan之类的开发过混合式app,那么微信小程序可能与这种方式更为接近。不过微信小程序是依赖微信开发平台的,甚至连ide都是专用的,做出来的成品,也只能在微信中通过或扫码找到入口,然后进行访问。这些天一直在尝试用微信小程序来改写原来的h5项目。有一些小小的心得,怕过久了会忘记,于是就写下来,当作一个备忘隶,也给正好给想要学习微信小程序的同学分享一下。 微信小程序是国产的,不用担心文档看不懂,也不用担心网络被墙,这一点很方便。官方的起步教程写的很简单,直接给链接 。 如果你之前没有接触过微信小程序,那么可以跟着我的步骤一起来。 首先是下载开发工具,磨刀不误砍材工。点此下载  这是一个针对微信小程序开发的IDE工具,集预览,打包发布,,语法提示于一身,仅管如此,我还是不太习惯,我习惯是在sublime中进行代码的编辑,只是用它进行代码的调试。 挺简单,就不多说了。双击打开它,如果提示要扫码登陆,则通过微信扫一扫进行授权,然后就可以进行下面的操作了。 我现在只想体验一下,点击 `无APP` , 项目名称自己根据实际需要真写,目录选一个空目录就好了。点击添加项目,完成效果如下: 点击编辑,左侧是,中间是预览效果,右则是控制台。   如果钩选了就会生成示例代码,则目录下面有三个app开头的文件及pages,utils两个目录,关于整个目录结构,请参考官方关于介绍部分,下面是需要搞明白的一些知识点: .js是小程序的脚本代码,.wxss是样式,.json是配置信息。每新增一个页面,就要在app.json的page项中进行新增一条配置。如增加一个“关于我们”: "pages":[     "pages/index/index",     "pages/logs/logs",    "pages/about/about" //添加关于我们   ], 登录后复制  保存之后,自动会生成必要的文件和目录,接下来,就是根据自己的业务进行相应的修改。注意,在微信小程序中,不能再用jQuery/zetpo这类工具了。因为微信小程序中没有window 对于自己创建的页面,都以Page({})开始,如果用过Vue的话,就想象成new Vue({}) 的调用方式。微信小程序的语法和思想和Vue像极了,说不定是参考它的方式也是可能的。 Page({   data: {     motto: 'Hello World',     userInfo: {}…
2024-11-25 阅读全文 →
FWQ
小程序
微信小程序快速开发简单入门教程
这篇文章主要介绍了微信小程序开发实例详解的相关资料,需要的朋友可以参考下 简单搞了一下,吼吼~: js:业务处理 //index.js //获取应用实例 var app = getApp() Page({  data: {   motto: 'Hello World',   userInfo: {name:'汗青',         desc:"前端的春天来了!  前端要烂大街了!!",      avatarUrl:"http://img2.3lian.com/2014/gif/10/9/25.jpg"}  },  //事件处理函数  bindViewTap: function() {   wx.navigateTo({    url: '../logs/logs'   })  },  onLoad: function () {   console.log('onLoad')   var that = this    //调用应用实例的方法获取全局数据   app.getUserInfo(function(userInfo){    //更新数据    that.setData({     userInfo:userInfo…
2024-11-25 阅读全文 →
FWQ
小程序
一起探究微信小程序开发
这篇一起探究微信小程序开发,非常具有实用价值,需要的朋友可以参考下。 前段时间比较流行的微信小程序,因为一直没有所谓内测码也没具体关注。拖到现在正好借组内分享的时机来仔细了解一下微信小程序。了解一个新的事物无外乎从是什么(本质),怎么用(具体用法),为什么用(优缺点)来学习,首先分析一下微信小程序是什么,听起来比较高大上,说实话原来我确实挺疑惑,到底这一套是什么开发机制,native?hybrid?纯h5?看网上各种教程上来就说api说语法,感觉不先理清楚是什么的问题就去搬api过来纯粹是耍流氓。 一、微信小程序是什么:     言归正传,微信小程序的本质是什么?个人理解微信小程序本质还是一套前端框架,微信团队基于原来第三方h5页面在微信里只能通过h5实现原本可以由native实现的功能,例如上传图片等。进而采取的开放部分jsbridge的api来方便开发者。不过既然作为大厂肯定不会仅仅开放部分jsbridge的api就完了,顺便微信类似vue、react一样实现了一套自己的mvvm的框架就是目前的微信小程序。官方文档这样描述:框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,可以让开发者可以方便的聚焦于数据与逻辑上。 本质还是一套前端框架,代码最终将会打包成一份 JavaScript并在小程序启动的时候运行,直到小程序销毁。模版语法类似vue,接近原生的自定义标签。数据绑定和渲染类似vue的语法,不过是以wx:开头(vue 以v: 作为标识) 事件系统类似react一样定义了一套自己的事件系统。 二、微信运行环境: 微信小程序运行在三端:iOS、Android 和 用于调试的开发者工具 在 iOS 上,小程序的 javascript 代码是运行在 JavaScriptCore 中 在 Android 上,小程序的…
2024-11-25 阅读全文 →
FWQ
小程序
微信小程序开发需要了解的三个内核技术
本文简要分析微信小程序的运行机制,可能对于你对微信小程序的认识会深刻和透彻一些。官方文档中有如下介绍: 在iOS 上,小程序的 代码是运行在 JavaScriptCore 中 在 上,小程序的 javascript 代码是通过 X5 内核来解析 在开发工具上, 小程序的 javascript 代码是运行在 nwjs(chrome内核) 中 一、JavaScriptCore JavaScriptCores是开源的,下载地址是https://github.com/phoboslab/JavaScriptCore-iOS OS X Mavericks 和 iOS 7 引入了 JavaScriptCore…
2024-11-25 阅读全文 →
FWQ
小程序
分享微信小程序的一些常见辅助测试功能:chance
我们我们要介绍的是一款微信小程序辅助测试工具:chance!chance是一个 javascript 随机数生成工具,当我们再测试小程序的一些功能时可能会需要一些随机的电话号码,邮编啊,名字啊,chance能够生成随机的数字,字节,字符,命名空间,地址,字典等待,帮助更好的进行自动测试。chance是个开源软件,在开发及商用均友好的mit许可下发布。 Chance 使用 随机生成基本数据:     console.log(chance.bool()); // 输出:false     console.log(chance.character()); // 输出:I     console.log(chance.floating()); // 输出:246585506136.064     console.log(chance.integer()); // 输出:1867472378527744     console.log(chance.natural()); // 输出:3524803082321920     console.log(chance.string()); // 输出:7IVZVkvg2dLI@IP91C@V 登录后复制 随机生成文本: console.log(chance.paragraph()); 登录后复制 登录后复制 随机生成电话号码: console.log(chance.paragraph()); 登录后复制 登录后复制 随机生成邮编:     console.log(chance.zip()); // 76750 随机生成GUID:…
2024-11-25 阅读全文 →
FWQ
小程序
Vuex模块化(module)实例详解
本文主要和大家介绍vuex 模块化(module),小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助到大家。 一、为什么需要模块化 前面我们讲到的例子都在一个状态树里进行,当一个项目比较大时,所有的状态都集中在一起会得到一个比较大的对象,进而显得臃肿,难以维护。为了解决这个问题,Vuex允许我们将store分割成模块(module),每个module有自己的state,mutation,action,getter,甚至还可以往下嵌套模块,下面我们看一个典型的模块化例子 const moduleA = { state: {....}, mutations: {....}, actions: {....}, getters: {....} } const moduleB = { state: {....}, mutations: {....}, actions: {....}, getters:…
2024-11-25 阅读全文 →
FWQ
小程序
微信小程序实现使用腾讯地图SDK步骤详细介绍
这篇文章微信小程序实现使用腾讯sdk步骤详细介绍的相关资料,需要的朋友可以参考下 微信小程序 使用腾讯地图SDK详解及实现步骤  近期在做一款彩票服务类项目中用到了腾讯地图提供的小程序解决方案,拿来给大家分享一下!   使用起来非常简单,就是一些功能还有待完善。   官方文档:lbs.qq.com/qqmap_wx_jssdk/index.html 步骤: 申请开发者密钥():申请密匙 下载微信小程序JavascriptSDK,微信小程序JavascriptSDK v1.0 安全域名设置,需要在微信公众平台添加域名地址apis.map.qq.com 小程序示例 // 引入SDK核心类 var QQMapWX = require('../../libs/qqmap-wx-jssdk.js'); var qqmapsdk; Page({  onLoad: function () {    // 实例化API核心类    qqmapsdk = new QQMapWX({      key: '申请的key'    });  },  onShow: function () {    // 调用接口    qqmapsdk.search({      keyword: '彩票',      success: function (res) {        console.log(res);…
2024-11-25 阅读全文 →