分类 视频 下的文章

基于Bmob开发问答小程序Demo实录[视频]

大概花费4个小时,不需要掌握后端开发,实现问答小程序Demo。

这不是真正意义上的教程,它是全程开发的实录。

视频章节

0、简单介绍与预览

1、建立列表页与跳转按钮

2、提问页面的布局与样式

3、提交字符串数据到Bmob

4、多图上传

5、多图上传不覆盖与图片预览

6、删除图片

7、列表页读取数据

8、跳转读取回答页面及它的布局

9、回答页面的样式

10、集成Bmob用户登录

11、对注册方式一的登录补充

12、关联对象链接访问无效的替代方案

13、Bmob用户注册方式二

14、细节拾遗

15、源码下载以及数据导入

回答.png

由于我也是第一次使用Bmob开发小程序,意图在于记下每一次的踩坑,因此过程比较冗长,适合快进着看完。

技能要点

1、怎么使用Bmob快速实现自己的一个idea
2、基本的CRUD、关联表以及多图上传
3、Bmob集成用户登录
4、Mina框架高频的组件与API的使用

提问.png

如何导入项目

可以参考我之前的文章:http://blog.it577.net/archives/32/

白名单配置为你的Bmob AppId 加个bmobcloud.com

源码托管地址:http://git.oschina.net/laeser/course

列表.png

对移动开发有兴趣的朋友可以关注我的公众号【huangxiujie85】,第一时间获取博文推送

公众号huangxiujie85

仿饿了么地址定位、筛选与回传

通过本文你可以了解到:

通过qqmapsdk.reverseGeocoder()获取当前定位中文地址
通过qqmapsdk.getSuggestion()关键字搜索获取周边地址
通过WxNotification回传数据到上一页

先来浏览一下效果图:

效果图

请求用户地理定位

通过腾讯地图api实现,下载地址:http://lbs.qq.com/qqmap_wx_jssdk/

1.自动定位以及返回10个相近位置

核心代码如下:

//引入类库
var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js')
qqmapsdk = new QQMapWX({
            key: 'BJFBZ-ZFTHW-Y2HRO-RL2UZ-M6EC3-GMF4U'
        });
qqmapsdk.reverseGeocoder({
    get_poi: 1,
    success: function (res) {
        that.setData({
            currentAddress: res.result.formatted_addresses.recommend,
            city: res.result.address_component.city,
            result: res.result.pois
        });
    }
});

其中get_poi设置为1,可以返回得到当前定位周边的10个相近位置

2.关键字搜索

核心代码:

var keyword = e.detail.value;
qqmapsdk.getSuggestion({
    keyword: keyword,
    region: that.data.city,
    success: function (res) {
        that.setData({
            result: res.data
        });
    }
});

其中region参数,传入之前reverseGeocoder获取得到的城市信息,以过滤非本城市以外的其他搜索结果。

回传数据到首页

这里用到了第三方库WxNotification

下载地址:https://github.com/icindy/WxNotificationCenter

核心方法如下:

//引入类库
var WxNotificationCenter = require("../../utils/WxNotificationCenter.js");
//index.js 初始化注册通知
WxNotificationCenter.addNotification("getAddressNotification",that.getAddress,that)
//index.js 监听通知,通过成员方法getAddress回调得到期望的参数值address
WxNotificationCenter.addNotification("addressSelectedNotification",that.getAddress,that)
//search.js 发送通知,带上address参数值
WxNotificationCenter.postNotificationName("addressSelectedNotification", address);

实现getAddress方法

getAddress: function (address) {
    that.setData({
        address: address
    });
}

本文同期视频教程已经传到了自家小程序【灵动云课堂】上,感兴趣的朋友可以在线观看。

本文源码下载:http://git.oschina.net/dotton/demo-wx

对移动开发有兴趣的朋友可以关注我的公众号【huangxiujie85】与我交流讨论,给我留言或文章评论。

微信小程序(应用号)零基础视频课程之加法计算器应用

本课程的源码请移步文章末尾

输入图片说明

核心代码:
1.plus.wxml

<view>
    <input placeholder="a" bindinput="getA"></input>
    <label>+</label>
    <input placeholder="b" bindinput="getB"></input>
    <text>=</text>
    <text>{{result}}</text>
    <button type="primary" bindtap="plus">运算</button>
</view>

2.plus.js

var a
var b
Page({
    data:{
        result:''
    },
    plus:function(){
        // 转int,不然成了字符串拼接
        var c = parseInt(a) + parseInt(b)
        this.setData({
            result : c
        });
    },
    // 监听input值改变事件
    getA: function(e) {
        a = e.detail.value
    },
    getB: function(e) {
        b = e.detail.value
    }
})

3.应用配置,注册plus页面

{
  "pages":[
    "pages/plus/plus",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

源码下载:扫描下方二维码->回复1001

在线视频:扫描下方二维码->回复2001

视频下载:https://pan.baidu.com/s/1b2Rjm2 提取码:kn2n

对小程序开发有趣的朋友可以加QQ群: 581513218,微信: small_application,陆续还将推出更多作品。

公众号:huangxiujie85

公众号