进云原生小程序的开发新手技巧

2022-04-16 12:42:44 浏览数 (1)

进云小程序的设计理念,基本跟H5的保持一直,所以小程序的目录结构尽量跟H5的一样(插件的不用加addons,系统的页面在core文件下;例如:jy_weishop/index/目录,对应的就是H5:addons/jy_weishop/index.php),获取数据,提交数据的方法也是跟H5一样的;进云自动生成的小程序源码包,已经按小程序目录生成好了,一般情况下,不用修改目录,另外也内置了所有的基础系统源码在core文件,还内置了jy_weishop源码包。开发者只需优化自己插件的几个页面就行。

小程序会自动识别进云服务器返回的数据:包括,但不限:错误提示语,成功提示,get数据,POST数据等;

1、首先要先去开发中心-生成小程序源码(最好的插件H5程序已经完善的差不多后,再生成小程序源码,这样生成的小程序源码更完善些);

教程移步:http://s.jinyunweb.com/manage/index.php?p=core&action=article.show&nosession=1&id=388

2、进云机制下:小程序源码解读:

【获取页面数据解读】:

代码语言:javascript复制
app.access是指当前访问页面的地址,是对象形式:{'plugin':'jy_weishop','action':'index','op':'get'}
app.util.get(app.access,function(pagedata){
//console.log('index');console.log(pagedata);
page.setData({
    pluginnav:app.session.menus,//获取的当前小程序插件的底部菜单,必须是标准的,通过插件跟目录下:model/custom_mobile_menu.php文件获取的导航;
    pagedata:pagedata,//尽量保存在pagedata,因为H5读取的数据也是保存在pagedata。这样小程序html页面改动最小
    action:'jy_weishop/index/',//可以知道aciton,如果页面要用到的话
});
});

【页面访问解读】:

下面是一个典型的访问进云页面的写法:

代码语言:javascript复制
data-func="access" data-params="jy_weishop/goods.detail//id={{item.id}}" bindtap="click"
其中:data-params里面填的是进云标准的短地址,可以缩略方式写,缩略规则跟进云路径规则一直;
注意:这个地址是跟H5地址一样的,所有小程序的目录也必须按照这个地址来,否则会读取不到小程序源文件。
本访问方法:会先读取小程序源文件,如果不存在,就会直接访问H5页面;

【页面POST数据方法】

代码语言:javascript复制
方法一:js方法
app.util.post('jy_weishop/index/post/',data,function(res){
    consolg.log(res)
});
方法二:单纯提交 //直接在HTML端写
data-func="post"  data-params="jy_weishop/member.cart/offeradd/" bindtap="click"
注意:data-func的值是post的话 ,就是提交数据,比如上面的加入购物车。小程序会根据服务器后台exi('提交成功')。返回提示

【小程序底部导航加载方法】:

代码语言:javascript复制
<include src="/pages/_menu.wxml"/> //只需在HTML页面底部加上这句,就会读取当前插件的底部菜单

【小程序获取授权方法】:

代码语言:javascript复制
<include src="/pages/_wxauth.wxml"/> //HTML页面下面加入设个授权页面
下面是会员页面获取授权示例:
onLoad: function (){
		var page=this;
		var ShowAuthM=page.data.ShowAuthM;
		wx.setNavigationBarTitle({'title':page.data.pagetitle});
		app.util.get(app.access,function(pagedata){
			console.log('member');console.log(pagedata);
			if((!pagedata.item.nickname || !pagedata.item.avatar) && !app.isgetUserInfo){
					ShowAuthM=!ShowAuthM
			}
			page.setData({
				pagedata:pagedata,
				ShowAuthM:ShowAuthM,
				pluginnav:app.session.menus,
				action:app.access.plugin '/' app.access.action '/'
			});
		});
	},
	info_login:function(e){
		//根据openid为用户登陆,此处尝试获取用户信息
		var the=this;
		app.util.getUserInfo(e,function(res){
			the.onLoad();
		});
		app.isgetUserInfo=true
		the.setData({
			ShowAuthM:false
		})
	},
要注意赋值ShowAuthM的时机,只要ShowAuthM为true,就会弹出授权窗口

【公众号是站点的依赖】:

站点很多地方依赖了公众号,所以必须添加一个公众号,那怕是跟其他站点,重复的也行,比如默认借用系统的;

小程序本身是不依赖公众号的,没用公众号也能正常运行,只是有些H5页面会依赖到。

0 人点赞