张小龙在2017微信公开课PRO版上宣布微信小程序将于2017年1月9日正式在客户端上线。在分论坛上,微信官方首次对小程序的能力进行了全面解读,并在现场对小程序作了案例展示。
微信官方带来小程序能力解读:
微信团队现场详解了微信小程序的能力,包括线下扫码、对话分享、消息通知、小程序切换、历史列表、公众号关联和搜索查找等7大功能。
线下扫码:用户可以在小程序中使用扫一扫。
对话分享:用户可以分享小程序或其中的任何一个页面给好友或群聊。
消息通知:商户可以发送模板消息给接受过服务的用户,用户可以在小程序内联系客服,支持文字和。
小程序切换:用户可以在使用小程序的过程中快速返回聊天。
历史列表:用户使用过的小程序会被放入列表,方便下次使用。
公众号关联:微信小程序可与公众号进行关联。
搜索查找:用户可直接根据名称或品牌搜索小程序。
小程序推广方式。
1、附近的小程序(免费),在小程序后台,开通“附近的小程序”,设置门店地理位置,小程序自动展现给周边5km内的微信用户,所有符合条件的小程序能在“附近的小程序”」获得免费曝光,且一个小程序能添加10个地理位置。
2、附近的小程序广告(需付费)。附近的小程序是微信开放的关键流量入口,同时开放了广告投放渠道。广告位是在附近小程序的第三行,点击即可打开对应的小程序,暂不支持其他页面的跳转。
3、微信群分享,实现粉丝裂变(免费),在原有的粉丝群同步通知,让粉丝自主扩散,可引导粉丝分享,然后凭截图领取小礼物,逐步将流量引到小程序,促成销售。
4、二维码海报(免费+付费,适用线上线下多种场景,可以通过后台生成小程序二维码,并将其植入到线上线下海报或户外广告中。例如:朋友圈、微信群、门店、电梯、机场、活动现场等等。
5、地推(免费,但是需成本。对于部分小程序而言,地推或许是最贴近用户场景的推广方式,线下以小程序码的方式,通过宣传物料等推广小程序。诸如:餐饮,鲜花,美容,健身等线下门店,效果明显,转化快。
6、公众号关联小程序(免费),
1公众号资料详情页绑定相关小程序,当用户关注你的公众号时,就能看到位于显眼位置的相关小程序,点击可直接跳转到小程序。
2公众号文章插入小程序名片,用户结合内容对产品/服务感兴趣的话,就能直接点进小程序,从而实现内容→购买的转化。不过,这是一个长期运营的过程,前期效果取决于公众号本身的粉丝留存量。
3公众号自定义菜单栏关联小程序,用户可以直接点击访问小程序。
4通过得有店的组件“关注公众号”,可以在小程序商城首页放置公众号二维码信息,引导小程序用户关注公众号。
7、微信小程序广告(付费)在后台开通广告主,由小程序流量主自定义展现场景,根据各自小程序的特点,灵活设置展现页面与位置。常见展现场景为:文章页-文章末尾、详情页-页面底部、信息流-信息流顶部或信息流之间。
8、品牌官方推广(免费),品牌官方区,通过开放接入商家信息,帮助商家触达用户,更好地为用户提供服务和内容。开通品牌官方区后,商家将获得丰富的展示能力。用户可以通过搜索品牌名称直达商家,同时,商家的服务和物品也有机会出现在相关搜索结果中。
9、模板消息推送(免费),模板消息是小程序在微信内部对每个用户生成的推送。内容类可以用它提示更新,电商类可以用它提示促销或未付款,工具类可以用它提示完成日常目标。每一次推送都在让用户逐渐形成对小程序的依赖。
10、小程序商店(付费),通过付费或其他方式将小程序投放至小程序商店,也能起到一定的宣传效果。主流的小程序商店有知晓程序、微信小程序大全、大梦想程序商店、小程序窝等。
11、拼团、砍价等营销裂变工具(免费),商家通过得有店系统低成本低门槛开发自己的微信小程序商城,利用得有店提供的拼团、砍价、分销等裂变工具,快速拉新增粉,轻松获取新客,提高销量。
12、新媒体软文推广(付费),可借助KOL的粉丝号召力推广小程序,不失为新媒体时代的一大主流推广方式。通过优质的软文广告或硬广,将小程序投放到微信及其他的新媒体平台。目前很多10万+自媒体都有明确的投稿标价。
13、App分享到微信(免费),有的商家有自己的app商城,将小程序和app通过技术手段对接,当把APP的内容分享到微信,就会自动转为小程序卡片,用户点击直接跳转到小程序页面。
14、微信支付(免费),
1用户支付完成后,在支付成功的页面,你可设置提示关注你的公众号。
2在「支付凭证」页面中,还可以再一次推荐你的小程序,提醒用户二次购买。
3消费分享获得“立减金”进行快速裂变拉新,吸引用户进入小程序完成转化。
4巧用微信搜索入口,用小程序名称抢排位(免费)。小程序的名称是唯一的,小程序的排名跟名称、描述、上线时间、用户访问量和小程序的综合质量有关。根据用户的搜索习惯和产品特性,尽可能多地注册小程序名称,才能让小程序的排名更靠前,更有可能被用户搜索到。就是多做一些小程序(每个企业主体可以申请50个小程序)形成霸屏,将目前能想到的一些关键词都用上,但是需要注意小程序的命名规范。另外,我们需要做的是优化小程序描述关键词。
16、小程序与小程序之间的跳转(免费),可以将每个产品线各做一个小程序,绑定在同一个公众号主体上,然后互相跳转。
17、礼品卡玩法(免费),最早玩转礼品卡的是「星巴克用星说」小程序,用户购买礼品卡,分享给朋友,朋友到星巴克后,可以直接使用礼品卡;具体玩法可参考「星巴克用星说」和「麦当劳」小程序。
第一步当然是注册账号了。
注册流程:
在微信公众平台右上角点击“立即注册”,选择账号注册类型:小程序。
按要求填写小程序账号信息,包括邮箱、密码等等,填写完后,系统会发送你一个邮件,登陆相应邮箱激活账号即可
激活后,选择好主体类型,个人就选个人,企业会需要提交一些资料。一切做好后,这就注册完成了。
使用小程序账号密码登入小程序后台。在设置里设置小程序的头像、名字、服务类目(这个一定不要乱写)等信息,提交后等待微信审核。
这样,你的小程序账号就注册好了。
第二步,生成小程序
虽然已经有了一个小程序账号,但是还没有一个真正的小程序实体,空有名字,而不知道它到底长什么样子。目前市面有很多第三方小程序开发工具,我们可以用它们来做。这里我以沃然建站平台小程序开发工具为例,给大家示范下如何制作一款自己的小程序
1选择模板首先,挑选一个你喜欢的模板,开始编辑。
2直接点击“添加新的商品”,就可以把自己的产品都上架了。如果商品较多,别忘了在商店设置里设置好商品分类。
3风格设计装修,选择喜欢的主题颜色和导航栏,也可以自定义颜色。
4添加或删除各种板块。一个小程序商城就是由各种板块组成的:轮播图、快捷按钮、滑动布局、优惠活动等等。
一个属于你自己的文章小程序就制作完成了。再点击左下角的立即发布,授权给你刚刚在微信公众平台注册的小程序账号,就一切搞定!
就是这么简单~是不是没有任何难度?以上就是微信小程序怎么制作教程了。
识字传图神器,扫图取字大师等此类微信小程序,都可以解决你这种问题。不仅不占用手机空间,用完就走,下次打开微信就能再用,当然了,你如果工作中需要大量的识字打印工作,需要下载电脑版的。
微信小程序自带的API中的页面交互功能,虽然提示功能非常全面,但是所有的交互API中是没有可以自己在提示框中输入文本的功能,那么现在我们来自己做这样的一个提示框(可以带有输入功能),在提示框输入完内容之后,点击确定,可以将文本内容返回,点击取消则可以回到之前的状态。
(在这里,主页面的布局可以根据每个人的想法来布局,这里展示的css之后展示提示框部分的)
1、首先打开微信开发者工具,建立一个代码模板,那么我们这个提示框就是写在这个页面上。
这里我们主页面叫做index
2、在基本页面中写上一个姓名的文本,当前姓名用<text>{{stuName}}</text>表示,然后为一个button按钮,再在js文件中,建立相应的点击事件以及stuName的信息。这样,一个原始页面就写好了。
下面我们开始弹出框页面的制作
<view class='toast-box' hidden='{{!ifName}}'>
<view class='toastbg'></view>
<view class='showToast'>
<view class='toast-title'>
<text>修改姓名</text>
</view>
<view class='toast-main'>
<view class='toast-input'>
<input placeholder='请输入姓名' bindinput='setValue' data-name='stuEidtName'></input>
</view>
</view>
<view class='toast-button'>
<view class='button1'>
<button catchtap='cancel'>取消</button>
</view>
<view class='button2'>
<button catchtap='confirm'>确定</button>
</view>
</view>
</view>
</view>
3、我们可以发现,点击按钮后弹出输入框,如果点击除取消和确定之外的地方,是不会有反应的。为了做到这个功能,我们用一个绝对位置的渲染层(toastbg),覆盖住整个页面,并且如果你的页面长度没有滚动的话,请输入min—height:100vh,如果页面发生滚动,请把长度控制在height:100%即可看到整个页面都被覆盖。并且这个覆盖的页面要表现为透明,opacity:02,即可
4、bindinput为写文本时所触发的事件,data-name为文本数据所保存的地方,在js中我们可以把这个数据打印出来,会发现我们所输入的文本信息。
以下为css的代码
toast-box {
width: 100%;
height: 100%;
opacity: 1;
position: fixed;
top: 0px;
left: 0px;
}
toastbg {
opacity: 02;
background-color: black;
position: absolute;
width: 100%;
min-height: 100vh;
}
showToast {
position: absolute;
opacity: 1;
width: 70%;
margin-left: 15%;
margin-top: 40%;
}
toast-title {
padding-left: 5%;
background-color: #2196f3;
color: white;
padding-top: 2vh;
padding-bottom: 2vh;
border-top-right-radius: 16rpx;
border-top-left-radius: 16rpx;
}
toast-main {
padding-top: 2vh;
padding-bottom: 2vh;
background-color: white;
text-align: center;
}
toast-input {
margin-left: 5%;
margin-right: 5%;
border: 1px solid #ddd;
padding-left: 2vh;
padding-right: 2vh;
padding-top: 1vh;
padding-bottom: 1vh;
}
toast-button {
display: flex;
}
button1 {
width: 50%;
}
button2 {
width: 50%;
}
button1 button {
width: 100%;
background-color: white;
color: red;
border-radius: 0px;
border-bottom-left-radius: 16rpx;
}
button2 button{
width: 100%;
background-color: white;
color: black;
border-radius: 0px;
border-bottom-right-radius: 16rpx;
}
picker {
padding-top: 1vh;
padding-bottom: 1vh;
}
我们可以根据自己的喜欢,对提示框的样式进行改变
5、编写js代码,我们需要实现以下一些基本功能(点击出现弹窗,取消不改变数据值,确定进行判断数据值,若为空则不能改变,否则可以改变,并且主页面上的内容要变为相应改变后的内容)
6、给最外层的弹窗附上hidden(如图所示),为这个值初始为false,点击按钮后触发事件,改false为true,这样即可点击出现弹窗。
7、为取消按钮附上点击事件,与hidden的部分刚好相反即可。
8、为书写文本绑定事件,上述代码中命名为setValue,这个函数我们传入一个event进去,将其打印,我们可以发现在其的detail中有我们刚刚所书写的内容,我们将这个值,传给js中data一个属性,这里我们命名为edit。
9、为确定绑定事件,用thisdataedit将这个值进行判断,若为空,我们用wxshowToast提示用户信息没有填写完整,并且页面不会改变。若不为空,则我们setData一下我们的stuName为这个edit的值,并且重新把hidden的属性值改为false。
10、返回到初始页面我们就可以看到我们自己做得一个提示框,并且具有修改值的功能